React Redux使用的一些小優化

2021-09-17 02:16:53 字數 2142 閱讀 4565

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

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

function reducer(state, action)

}

這個**雖然在selector中,也可以通過arestatepropsequal來判斷計算後的state是否發生了改變。

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

同樣,state內部資料,如果資料相同,盡量使用原資料。只針對複雜資料型別(object,array)。

比如:

function reducer(state, action) ;

// ...一大堆邏輯

return

}

很多時候,一般習慣於通過計算,然後直接把生成的newstate賦值給maynotchange

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

注: 所說的選擇使用原來的物件,是確定資料沒有發生改變的時候,使用原物件。並不是說當發生改變的時候,也在原來的物件上面修改最好。在不考慮自定義arestatesequal和arestatepropsequal的情況下,如果只在原物件上面進行修改,可能會造成對比的時候,前後兩種結果相同,可能造成無法重新渲染的情況

connectoption中,有四個對比的方法

arestatesequal(預設為===),用來判斷redux store返回的state是否和之前的相同

areownpropsequal(預設為shallowequal),用來判斷父元件傳入的props是否和之前的相同

arestatepropsequal(預設為shallowequal),用來判斷mapstatetoprops的結果是否和之前的相同

aremergedpropsequal(預設為shallowequal),用來判斷最後merge合併的最終結果是否和之前的相同

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

比如乙個reduxstate是這個樣子:

state = ,

pageb: ,

number: 2

}

而在pagea裡面只需要pageanumber,那麼就可以通過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...