一、場(chǎng)景描述

購(gòu)物車涉及店鋪和商品，商品是以店鋪維度依次展開，商品可以勾選選中，也可以編輯刪除和全選刪除。店鋪下的商品不限制數(shù)量（淘寶、天貓、京東等等，限制為100條），請(qǐng)求商品id的接口未做分頁(yè)。

二、技術(shù)選型

1.考慮到設(shè)計(jì)到較多的數(shù)據(jù)交互，采用redux作為數(shù)據(jù)管理。
2.整體采用sectionList作為列表（未采用getItemLayout（有些item項(xiàng)高度不一致，且有動(dòng)畫，若添加動(dòng)畫會(huì)跳轉(zhuǎn)不準(zhǔn)確）、未采用PureComponent（數(shù)據(jù)涉及到層級(jí)比較深））
3.將每個(gè)item項(xiàng)的各個(gè)組成部分抽出組件，購(gòu)物車的加減組件、商品卡組件等（組件化方便復(fù)用、卡片式設(shè)計(jì)）

三、測(cè)試

直接未做任何優(yōu)化處理的結(jié)果（測(cè)試340條商品數(shù)據(jù)）

安卓：?jiǎn)?dòng)到渲染完成花了17秒，滑動(dòng)正常，勾選很卡，操作很卡
ios： 啟動(dòng)到渲染花了8秒，滑動(dòng)崩潰，勾選有些卡，操作有些卡

四、分析問(wèn)題：

通過(guò)打log，分析渲染時(shí)間緩慢的原因可能有：
1.數(shù)據(jù)組裝（未分頁(yè)）-加載慢的原因
2.組件渲染（每次改動(dòng)，所有購(gòu)物車商品卡頁(yè)面全部子組件都刷新）-操作卡的原因
3.優(yōu)化實(shí)現(xiàn)（內(nèi)部邏輯存在問(wèn)題、減少頁(yè)面層級(jí)）
4.console.log存在性能問(wèn)題（傳給它的對(duì)象不能被垃圾回收，若傳進(jìn)去的對(duì)象太大就可能會(huì)造成內(nèi)存泄漏。）

五、優(yōu)化實(shí)現(xiàn)：

1.每個(gè)子組件都實(shí)現(xiàn)shouldComponentUpdate，減少刷新的次數(shù)，只有外部操作會(huì)影響子組件刷新的才返回true
2.優(yōu)化視圖的層級(jí)（減少層級(jí)）
3.優(yōu)化邏輯代碼（只在購(gòu)物車商品卡去connect，商品卡中的子組件通過(guò)閉包傳值的方式來(lái)拿到當(dāng)前頁(yè)所需數(shù)據(jù)）
4.將一次請(qǐng)求的商品id，做本地分頁(yè)，每次只加載3頁(yè)（上一頁(yè)、當(dāng)前頁(yè)和下一頁(yè)）

六優(yōu)化后的測(cè)試

安卓：?jiǎn)?dòng)到渲染完成不到1秒，滑動(dòng)正常，勾選流暢，操作流暢
ios： 啟動(dòng)到渲染花了不到1秒（比安卓流暢一點(diǎn)點(diǎn)），滑動(dòng)流暢，勾選流暢，操作流暢

七、坑

1.每個(gè)商品卡item項(xiàng)的子組件通過(guò)父組件傳值，商品卡item項(xiàng)能到最新的store中的數(shù)據(jù)，但是每次變更之后傳給子組件的prop都是一樣的，值變了但是引用未變，在子組件比較時(shí)，每次都不能刷新。
解決方法：在商品卡item項(xiàng)返回值時(shí)，每次產(chǎn)生一個(gè)新的對(duì)象，比如

newItem = {...item}