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