React狀態管理庫


React狀態管理庫

React沒有解決的問題

React本身只是一個抽象的DOM層,使用組件來構建虛擬的DOM

如果用React來開發大型的應用程序,還需要解決兩個問題

  • 架構:大型應用程序應該如何組織代碼
  • 通信: 組件之間應該如何通信

架構問題

React只是視圖層的解決方案,可以用任何一種架構

  • MVC
  • MVVM
  • Observer
  • Reactive
  • ...

到底哪一種架構最適合React


通信問題

組件會發生三種通信。

  • 向子組件發消息
  • 向父組件發消息
  • 向其它組件發消息

React只提供了一種通信手段,傳遞參數,對於大型應用程序的組件通信,非常的不方便。


狀態的同步

通信的本質是狀態的同步。

React同步狀態的基本方法:找到通信雙方最近的共同父組件,通過它的state,使得子組件的狀態保持同步。


Flux架構

Facebook提出Flux架構的概念,被認為是React應用的標准架構

最大的特點:數據單向驅動。與MVVM的雙向綁定形成鮮明對比。


Flux的核心思想

  • 不同組件的state,存放在一個外部的、公共的store上面
  • 組件訂閱Store的不同部分
  • 組件dispatch action ,更新state

Flux只是一種概念,有30多種實現。


目前最流行的兩個React架構

React架構最重要的作用:管理Store與Vue

  • MobX:響應式(Reactive)管理,state是可變對象,適合中小型項目
  • Redux:函數式(Functional)管理,state是不可變對象,適合大型項目

MobX接下來會學一下,Redux用的算熟了,以后用的多的估計還是Dva


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM