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