redux 中的 state 樹太大會不會有效能問題?

時間 2021-05-31 15:46:00

1樓:月明滄海

我的經驗是:react效能問題一般都是元件重新渲染太多導致的。通用解決方案一般有2個:

一是減少元件re-render,在shouldComponentUpdate入口處避免無必要的重新渲染(必要時使用deep equal對比)。二是使用

reselect

計算衍生狀態,減少重複計算。

2樓:hapood

效能問題一般情況下不會有太大影響,但是redux會將所有元件的state全部都扔進乙個大的state中去維護,每次reducer只會更新一小部分。這要求開發者要自行構建良好的state組織結構,否則當頁面元件越來越多時,很容易被乙個超級大的state繞暈。

我們現在在專案中使用了redux-arena,它可以將redux與react打包成乙個模組載入,如果react元件被解除安裝,那麼react元件在redux中的state/reducer/saga都會被自動解除安裝,徹底解決state樹和reducer過於龐大的問題。

一張gif圖說明redux-arena做了什麼,如下圖所示,當切換pageA和asyncPageB的掛載和解除安裝,會觸發redux中全域性state樹的改變,所有與當前頁面展示無關的state和reducer徹底不復存在,你看到的state一定是當前被掛載的元件的state,極大地提公升了state的可讀性。

還有一篇相關介紹在這裡:https://

zhuanlan /p/28690716

3樓:

homkai/react-redux-hk

當connect的元件太多時,用這個替換react-redux,可以提高效能,不需要業務上特殊處理

4樓:DreamPiggy

分析造成State樹龐大的原因:

本不改變state的這些action被dispatch出去,造成額外的state copy,這種情形可以採用GitHub - omnidan/redux-ignore: higher-order reducer to ignore redux actions

state存在多級複雜物件巢狀,現在有兩種解決方式:

對某個reducer,手動合併部分需要的state,由於ES7的Object Spread Operator(...state)只會拷貝enumerable屬性,並且只會拷貝一層,因此需要手動合併屬性,比如state:}

return

}如果state的某些屬性過於龐大,而不是複雜,可以採用Immutable.js,通過持久化資料結構和重用部分樹節點,實現高效返回乙個新的不可變物件,在保證了reducer的純函式性前提下,不僅免去手寫DeepMerge的繁瑣,又能達到高效的"修改"(即返回乙個部分屬性改變的新的不可變物件)部分屬性的效能。在你的component的shoudComponentUpdate方法中,通過Immutable的比較方法來判斷是否需要re-render()let

nested

=Immutable

.fromJS

(}});

letnested2

=nested

.mergeDeep

(}});

// Map } }

letnested3

=nested2

.updateIn

(['a'

,'b'

,'d'

],value

=>value+1

);// Map } }

如果state本身基本只和資料相關(和控制流互動狀態關係較少,可以通過拆分大的reducer來達到),可以直接把state本身用Immutable.Map之類包裹起來,在store繫結到component的時候解包

其他情況更多是架構問題,對細度小的同一類事件的state不應該單獨分,可以歸類成乙個物件的屬性來處理,對效能幾乎無影響,但統一處理之後能夠讓整個reducer更清晰。同時,state的管理,有三處位置(reducer,connect,shouldComponentUpdate),需要靈活使用,保證可維護性和效率的均衡

redux原始碼中的isDispatching有什麼用?

阻止花式作死。如通過reducer內dispatch,再次觸發reducer。reducer dispatch reducer dispatch reducer reducer完成後更新state,reducer內連續dispatch是無法準確更新state的。next action next ac...

如何可以將react中的state用redux正確地託管

小郭嘉 對於react redux專案中的state,不是所有的state都必須要交給redux託管吧?不是,對於元件自身短暫的且不影響全域性的state交由元件自身state管理就好。全域性的state,元件間需要通訊的資料交由redux管理。參考Redux作者的回答 Question How t...

啄木鳥在給樹除蟲過程中,到底是蟲給樹造成的傷害大還是啄木鳥?

大石 人類單方面的把啄木鳥定義為益鳥。本身就是一件很弱智的事情,一廂情願。啄木鳥除蟲只是它的覓食行為。人類喜歡一廂情願的給很多事物標註上情感色彩。本身就是病,得治。啄木鳥的覓食行為和外科醫生開刀做手術有什麼區別?外科醫生給你開完刀,把傷口給你縫上,消毒 打抗生素,等傷口差不多長好了,才讓你出院 啄木...