React Redux使用的一些小優化

史占廣發布于2019-08-20 13:54 / 516人閱讀

摘要：要做多余的檢查同樣，內部數據，如果數據相同，盡量使用原數據。注所說的選擇使用原來的對象，是確定數據沒有發生改變的時候，使用原對象。多余提一句，在使用的時候，要謹慎使用。當組件夠大，夠復雜，可以考慮使用這個方法來減少的消耗。

之前畫了一張redux的流程圖，可以看看右下角的部分，可以看出來怎么進行優化。

在reducer里面，盡量減少數據的變動 不要做多余、無意義的事

也就是能不改變就不改變。比如不要做下面這種無謂的事情：

function reducer(state, action){
  // ....一大堆邏輯代碼
  return {
   ...state
  }
}

這個代碼雖然在selector中，也可以通過areStatePropsEqual來判斷計算后的state是否發生了改變。

但是如果直接return state;就可以直接被areStatesEqual攔截，避免多余的計算和對比。

要做多余的檢查

同樣，state內部數據，如果數據相同，盡量使用原數據。只針對復雜數據類型(Object, Array)。
比如：

function reducer(state, action) {
  let mayNotChange = state.mayNotChange; // mayNotChange為Array或Object
  let newState = {...mayNotChange};
  // ...一大堆邏輯
  return {
    ...state,
    mayNotChange: changed ? newState : mayNotChange // 沒有發生改變的話，就用原來的對象
  }
}

很多時候，一般習慣于通過計算，然后直接把生成的newState賦值給mayNotChange。

由于眾所周知的{} !== {}的情況，如果能通過簡單判斷來決定是否可以選擇使用原來的對象，那么就可以通過areStatePropsEqual來進行判斷，同樣可以避免不必要的計算，更可以避免不必要的渲染。

注: 所說的選擇使用原來的對象，是確定數據沒有發生改變的時候，使用原對象。并不是說當發生改變的時候，也在原來的對象上面修改最好。在不考慮自定義areStatesEqual和areStatePropsEqual的情況下，如果只在原對象上面進行修改，可能會造成對比的時候，前后兩種結果相同，可能造成無法重新渲染的情況

優化equal的四個方法

在connect的option中，有四個對比的方法

areStatesEqual(默認為===)，用來判斷redux store返回的state是否和之前的相同

areOwnPropsEqual(默認為shallowEqual)，用來判斷父組件傳入的props是否和之前的相同

areStatePropsEqual(默認為shallowEqual)，用來判斷mapStateToProps的結果是否和之前的相同

areMergedPropsEqual(默認為shallowEqual)，用來判斷最后merge合并的最終結果是否和之前的相同

可以通過自己的需求對著四個方法進行優化。

比如一個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);
}

或者針對復雜結構數據的情況，進行特殊處理，比如深度對比

function areStatePropsEqual(prev, current){
  return deepEqual(prev, current);
}

這些優化都可以減少不必要的計算和重渲染。

shouldComponentUpdate

多余提一句，在使用shouldComponentUpdate的時候，要謹慎使用。這個方法就是利用shouldComponentUpdate的消耗來換取render的消耗。

當某些小的、調用的次數少的component，就沒有必要添加shouldComponentUpdate檢查。

當組件夠大，夠復雜，可以考慮使用這個方法來減少re-render的消耗。當然，還是需要考慮用這個方法的消耗和diff&render的消耗比起來哪個更劃算。

先想到這么多，等想到了其他的再添加上來。

GPU云服務器云服務器 react-redux React_Redux_Appointm react-router-redux ddos一些比較小的網站

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81307.html

React-Redux性能優化

摘要：但是和一起使用還需要一個工具，這一篇就說一下在使用上的一些性能優化建議。如果的改變會引起值變化，那么會調用轉換函數，傳入作為參數，并返回結果。如果的值和前一次的一樣，它將會直接返回前一次計算的數據，而不會再調用一次轉換函數。前面寫了兩篇文章《React組件性能優化》《Redux性能優化》，分別針對React和Redux在使用上的性能優化給了一些建議。但是React和Redux一起使用...

JouyPub 2019-08-21 10:57 評論0 收藏0
高級前端面試題大匯總（只有試題，沒有答案）

摘要：面試題來源于網絡，看一下高級前端的面試題，可以知道自己和高級前端的差距。面試題來源于網絡，看一下高級前端的面試題，可以知道自己和高級前端的差距。有些面試題會重復。使用過的koa2中間件 koa-body原理介紹自己寫過的中間件有沒有涉及到Cluster 介紹pm2 master掛了的話pm2怎么處理如何和MySQL進行通信 React聲明周期及自己的理解如何...

kviccn 2019-08-23 13:41 評論0 收藏0
2018大廠高級前端面試題匯總

摘要：面試的公司分別是阿里網易滴滴今日頭條有贊挖財滬江餓了么攜程喜馬拉雅兌吧微醫寺庫寶寶樹海康威視蘑菇街酷家樂百分點和海風教育。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本人于7-8月開始準備面試，過五關斬六將，最終抱得網易歸，深深感受到高級前端面試的套路。以下是自己整理的面試題匯總，不敢藏私，統統貢獻出來。面試的公司分...

zzir 2019-08-23 12:38 評論0 收藏0