Flutter中 Redux和Provider的比較

在flutter中,跨組件狀態共享是一個非常重要的課題,在一切皆爲widget的前提下,一般的原則是:如果狀態是組件私有的,則應該由組件自己管理;如果狀態要跨組件共享,則該狀態應該由各個組件共同的父元素來管理。對於組件私有的狀態管理很好理解,但對於跨組件共享的狀態,管理的方式就比較多了,這裏討論兩個最火的框架,Redux和Provider。

Redux

Redux 的思想來自於前端,作爲android 開發的我,掌握起來有點費勁,好在思路比較清晰,反覆理解幾遍後,也能理解的七七八八。Redux的狀態流轉圖可以參考如下:
在這裏插入圖片描述
對這張圖進行一下說明。

  • 所有的狀態都存儲在Store裏。這個Store會放在根Widget.
  • View拿到Store的狀態數據會映射成視圖渲染.
  • Redux不直接讓view操作數據,通過dispatch一個action通知Reducer,狀態變更
  • Reducer接收到這個action,根據action狀態,生成新的狀態,並替換在Store的舊狀態.
  • Store存儲了新的狀態後,就通知所有使用到了這個狀態的View更新(類似setState)。這樣我們就能夠同步不同view中的狀態了.

網上有很多介紹Redux的demo了,有個入門的教程Flutter 入門講的非常透徹
這篇文章主要是對比,不側重於普及某個技術。

理解了原理和敲完demo之後,對Redux應該有所瞭解了。除了dispatch action之外,Store的管理都得自己搞定。

Provider

Provider是官方推薦的狀態管理框架,Flutter實戰這本書闡述了原理,書的地址是https://book.flutterchina.club,也是flutter中文網的首選入門書籍,這裏講跨組件共享的時候,先理解了InheritWidget,它的天生特性就是能綁定InheritedWidget與依賴它的子孫組件的依賴關係,並且當InheritedWidget數據發生變化時,可以自動更新依賴的子孫組件!因爲Provider就是對這一層進行了封裝。大概的流程圖如下:
在這裏插入圖片描述
具體的用法已經在書籍中了,我就不重新造輪子了。

比較

  1. 流程上還是Provider比較清晰,有點類似觀察者的味道,熟悉觀察者設計模式的同學,看到之後會覺得熟悉的味道,熟悉的配方。Redux的設計理念就不是那麼容易懂.
  2. Redux思想來源於前端,對於前端同學掌握比較簡單。從代碼量來說,Redux要做的比較多,需要自己實現Store,Reducer。Provider基本只要實現繼承於ChangeNotifier即可。
  3. 從使用共享狀態來說,兩者都差不多,一個是StoreConnector,一個是Consumer,兩者都可以控制刷新力度,但據我實測,StoreConnector之外的FlattonButton的dispatch了action,這個FlattonButton還是會重新build,這個令人有點詫異
  4. 不管哪個框架,最終思想就是子組件共享父組件中的數據,方式不同,目的相同。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章