資訊專欄INFORMATION COLUMN
摘要：要做多余的檢查同樣，內(nèi)部數(shù)據(jù)，如果數(shù)據(jù)相同，盡量使用原數(shù)據(jù)。注所說(shuō)的選擇使用原來(lái)的對(duì)象，是確定數(shù)據(jù)沒有發(fā)生改變的時(shí)候，使用原對(duì)象。多余提一句，在使用的時(shí)候，要謹(jǐn)慎使用。當(dāng)組件夠大，夠復(fù)雜，可以考慮使用這個(gè)方法來(lái)減少的消耗。
之前畫了一張redux的流程圖，可以看看右下角的部分，可以看出來(lái)怎么進(jìn)行優(yōu)化。
在reducer里面，盡量減少數(shù)據(jù)的變動(dòng) 不要做多余、無(wú)意義的事也就是能不改變就不改變。比如不要做下面這種無(wú)謂的事情：
function reducer(state, action){
// ....一大堆邏輯代碼
return {
...state
}
}
這個(gè)代碼雖然在selector中，也可以通過(guò)areStatePropsEqual來(lái)判斷計(jì)算后的state是否發(fā)生了改變。
但是如果直接return state;就可以直接被areStatesEqual攔截，避免多余的計(jì)算和對(duì)比。
要做多余的檢查同樣，state內(nèi)部數(shù)據(jù)，如果數(shù)據(jù)相同，盡量使用原數(shù)據(jù)。只針對(duì)復(fù)雜數(shù)據(jù)類型(Object, Array)。
比如：
function reducer(state, action) {
let mayNotChange = state.mayNotChange; // mayNotChange為Array或Object
let newState = {...mayNotChange};
// ...一大堆邏輯
return {
...state,
mayNotChange: changed ? newState : mayNotChange // 沒有發(fā)生改變的話，就用原來(lái)的對(duì)象
}
}
很多時(shí)候，一般習(xí)慣于通過(guò)計(jì)算，然后直接把生成的newState賦值給mayNotChange。
由于眾所周知的{} !== {}的情況，如果能通過(guò)簡(jiǎn)單判斷來(lái)決定是否可以選擇使用原來(lái)的對(duì)象，那么就可以通過(guò)areStatePropsEqual來(lái)進(jìn)行判斷，同樣可以避免不必要的計(jì)算，更可以避免不必要的渲染。
注: 所說(shuō)的選擇使用原來(lái)的對(duì)象，是確定數(shù)據(jù)沒有發(fā)生改變的時(shí)候，使用原對(duì)象。并不是說(shuō)當(dāng)發(fā)生改變的時(shí)候，也在原來(lái)的對(duì)象上面修改最好。在不考慮自定義areStatesEqual和areStatePropsEqual的情況下，如果只在原對(duì)象上面進(jìn)行修改，可能會(huì)造成對(duì)比的時(shí)候，前后兩種結(jié)果相同，可能造成無(wú)法重新渲染的情況
優(yōu)化equal的四個(gè)方法在connect的option中，有四個(gè)對(duì)比的方法
areStatesEqual(默認(rèn)為===)，用來(lái)判斷redux store返回的state是否和之前的相同
areOwnPropsEqual(默認(rèn)為shallowEqual)，用來(lái)判斷父組件傳入的props是否和之前的相同
areStatePropsEqual(默認(rèn)為shallowEqual)，用來(lái)判斷mapStateToProps的結(jié)果是否和之前的相同
areMergedPropsEqual(默認(rèn)為shallowEqual)，用來(lái)判斷最后merge合并的最終結(jié)果是否和之前的相同
可以通過(guò)自己的需求對(duì)著四個(gè)方法進(jìn)行優(yōu)化。
比如一個(gè)redux的state是這個(gè)樣子：
state = {
pageA: {...},
pageB: {...},
number: 2
}
而在pageA里面只需要pageA和number，那么就可以通過(guò)areStatesEqual來(lái)進(jìn)行對(duì)比:
function areStatesEqual(prev, current){
return prev.number === current.number && isEqual(prev.pageA, current.pageA);
}
或者針對(duì)復(fù)雜結(jié)構(gòu)數(shù)據(jù)的情況，進(jìn)行特殊處理，比如深度對(duì)比
function areStatePropsEqual(prev, current){
return deepEqual(prev, current);
}
這些優(yōu)化都可以減少不必要的計(jì)算和重渲染。
shouldComponentUpdate多余提一句，在使用shouldComponentUpdate的時(shí)候，要謹(jǐn)慎使用。這個(gè)方法就是利用shouldComponentUpdate的消耗來(lái)?yè)Q取render的消耗。
當(dāng)某些小的、調(diào)用的次數(shù)少的component，就沒有必要添加shouldComponentUpdate檢查。
當(dāng)組件夠大，夠復(fù)雜，可以考慮使用這個(gè)方法來(lái)減少re-render的消耗。當(dāng)然，還是需要考慮用這個(gè)方法的消耗和diff&render的消耗比起來(lái)哪個(gè)更劃算。
先想到這么多，等想到了其他的再添加上來(lái)。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/81307.html
摘要：但是和一起使用還需要一個(gè)工具，這一篇就說(shuō)一下在使用上的一些性能優(yōu)化建議。如果的改變會(huì)引起值變化，那么會(huì)調(diào)用轉(zhuǎn)換函數(shù)，傳入作為參數(shù)，并返回結(jié)果。如果的值和前一次的一樣，它將會(huì)直接返回前一次計(jì)算的數(shù)據(jù)，而不會(huì)再調(diào)用一次轉(zhuǎn)換函數(shù)。 前面寫了兩篇文章《React組件性能優(yōu)化》《Redux性能優(yōu)化》，分別針對(duì)React和Redux在使用上的性能優(yōu)化給了一些建議。但是React和Redux一起使用...
摘要：面試題來(lái)源于網(wǎng)絡(luò)，看一下高級(jí)前端的面試題，可以知道自己和高級(jí)前端的差距。 面試題來(lái)源于網(wǎng)絡(luò)，看一下高級(jí)前端的面試題，可以知道自己和高級(jí)前端的差距。有些面試題會(huì)重復(fù)。 使用過(guò)的koa2中間件 koa-body原理 介紹自己寫過(guò)的中間件 有沒有涉及到Cluster 介紹pm2 master掛了的話pm2怎么處理 如何和MySQL進(jìn)行通信 React聲明周期及自己的理解 如何...
摘要：面試的公司分別是阿里網(wǎng)易滴滴今日頭條有贊挖財(cái)滬江餓了么攜程喜馬拉雅兌吧微醫(yī)寺庫(kù)寶寶樹海康威視蘑菇街酷家樂(lè)百分點(diǎn)和海風(fēng)教育。 （關(guān)注福利，關(guān)注本公眾號(hào)回復(fù)[資料]領(lǐng)取優(yōu)質(zhì)前端視頻，包括Vue、React、Node源碼和實(shí)戰(zhàn)、面試指導(dǎo)） 本人于7-8月開始準(zhǔn)備面試，過(guò)五關(guān)斬六將，最終抱得網(wǎng)易歸，深深感受到高級(jí)前端面試的套路。以下是自己整理的面試題匯總，不敢藏私，統(tǒng)統(tǒng)貢獻(xiàn)出來(lái)。 面試的公司分...
閱讀 1454·2021-09-22 10:02
閱讀 2236·2021-09-08 09:35
閱讀 4189·2021-08-12 13:29
閱讀 2683·2019-08-30 15:55
閱讀 2319·2019-08-30 15:53
閱讀 2381·2019-08-29 17:13
閱讀 2827·2019-08-29 16:31
閱讀 3012·2019-08-29 12:24
