一、场景描述
购物车涉及店铺和商品，商品是以店铺维度依次展开，商品可以勾选选中，也可以编辑删除和全选删除。店铺下的商品不限制数量（淘宝、天猫、京东等等，限制为100条），请求商品id的接口未做分页。
二、技术选型
1.考虑到设计到较多的数据交互，采用redux作为数据管理。
2.整体采用sectionList作为列表（未采用getItemLayout（有些item项高度不一致，且有动画，若添加动画会跳转不准确）、未采用PureComponent（数据涉及到层级比较深））
3.将每个item项的各个组成部分抽出组件，购物车的加减组件、商品卡组件等（组件化方便复用、卡片式设计）
三、测试
直接未做任何优化处理的结果（测试340条商品数据）
安卓：启动到渲染完成花了17秒，滑动正常，勾选很卡，操作很卡
ios： 启动到渲染花了8秒，滑动崩溃，勾选有些卡，操作有些卡
四、分析问题：
通过打log，分析渲染时间缓慢的原因可能有：
1.数据组装（未分页）-加载慢的原因
2.组件渲染（每次改动，所有购物车商品卡页面全部子组件都刷新）-操作卡的原因
3.优化实现（内部逻辑存在问题、减少页面层级）
4.console.log存在性能问题（传给它的对象不能被垃圾回收，若传进去的对象太大就可能会造成内存泄漏。）
五、优化实现：
1.每个子组件都实现shouldComponentUpdate，减少刷新的次数，只有外部操作会影响子组件刷新的才返回true
2.优化视图的层级（减少层级）
3.优化逻辑代码（只在购物车商品卡去connect，商品卡中的子组件通过闭包传值的方式来拿到当前页所需数据）
4.将一次请求的商品id，做本地分页，每次只加载3页（上一页、当前页和下一页）
六优化后的测试
安卓：启动到渲染完成不到1秒，滑动正常，勾选流畅，操作流畅
ios： 启动到渲染花了不到1秒（比安卓流畅一点点），滑动流畅，勾选流畅，操作流畅
七、坑
1.每个商品卡item项的子组件通过父组件传值，商品卡item项能到最新的store中的数据，但是每次变更之后传给子组件的prop都是一样的，值变了但是引用未变，在子组件比较时，每次都不能刷新。
解决方法：在商品卡item项返回值时，每次产生一个新的对象，比如
newItem = {...item}
