之前畫了一張redux的流程圖,可以看看右下角的部分,可以看出來怎麼進行優化。
也就是能不改變就不改變。比如不要做下面這種無謂的事情:
function reducer(state, action)
}
這個**雖然在selector中,也可以通過arestatepropsequal
來判斷計算後的state是否發生了改變。
但是如果直接return state;
就可以直接被arestatesequal
攔截,避免多餘的計算和對比。
同樣,state內部資料,如果資料相同,盡量使用原資料。只針對複雜資料型別(object
,array
)。
比如:
function reducer(state, action) ;
// ...一大堆邏輯
return
}
很多時候,一般習慣於通過計算,然後直接把生成的newstate
賦值給maynotchange
。
由於眾所周知的{} !== {}
的情況,如果能通過簡單判斷來決定是否可以選擇使用原來的物件,那麼就可以通過arestatepropsequal
來進行判斷,同樣可以避免不必要的計算,更可以避免不必要的渲染。
注: 所說的選擇使用原來的物件,是確定資料沒有發生改變的時候,使用原物件。並不是說當發生改變的時候,也在原來的物件上面修改最好。在不考慮自定義arestatesequal和arestatepropsequal的情況下,如果只在原物件上面進行修改,可能會造成對比的時候,前後兩種結果相同,可能造成無法重新渲染的情況
在connect
的option
中,有四個對比的方法
arestatesequal
(預設為===
),用來判斷redux store
返回的state
是否和之前的相同
areownpropsequal
(預設為shallowequal
),用來判斷父元件傳入的props
是否和之前的相同
arestatepropsequal
(預設為shallowequal
),用來判斷mapstatetoprops
的結果是否和之前的相同
aremergedpropsequal
(預設為shallowequal
),用來判斷最後merge合併的最終結果是否和之前的相同
可以通過自己的需求對著四個方法進行優化。
比如乙個redux
的state
是這個樣子:
state = ,
pageb: ,
number: 2
}
而在pagea裡面只需要pagea
和number
,那麼就可以通過arestatesequal
來進行對比:
function arestatesequal(prev, current)
或者針對複雜結構資料的情況,進行特殊處理,比如深度對比
function arestatepropsequal(prev, current)
這些優化都可以減少不必要的計算和重渲染。
多餘提一句,在使用shouldcomponentupdate
的時候,要謹慎使用。這個方法就是利用shouldcomponentupdate的消耗來換取render的消耗。
當某些小的、呼叫的次數少的component,就沒有必要新增shouldcomponentupdate檢查。
當元件夠大,夠複雜,可以考慮使用這個方法來減少re-render的消耗。當然,還是需要考慮用這個方法的消耗和diff&render的消耗比起來哪個更划算。
先想到這麼多,等想到了其他的再新增上來。
React Redux 的一些建議(上篇)
redux 並不是只和 react 結合使用的,它也可以和其他的很多類庫結合起來一起使用,即使你還未開始深入使用,你也可以閱讀文中的部分內容。在深入 redux testing 或是其他更高階的使用之前,我們還是先開始 react 吧。sudo npm install create react gc...
react redux使用的方法
1.mapdispatchtoprops中使用bindactioncreators 2.import thunk from redux thunk 使用redux thunk中介軟體,我們可以在action構造器中返回乙個函式,而不是乙個物件。3.通常情況下,我們的專案可能會有龐大的資料,所以一般情...
九 react redux的使用
ui元件 容器元件 import from react redux import countui from components count import from redux count action function mapstatetoprops state function mapdispa...