1 .mobx 与 redux 比较
函数式和面向对象
Redux更多的是遵循函数式编程(Functional Programming, FP)思想,而Mobx则更多从面相对象角度考虑问题。
Redux提倡编写函数式代码,
Mobx设计更多偏向于面向对象编程(OOP)和响应式编程(Reactive Programming),通常将状态包装成可观察对象,于是我们就可以使用可观察对象的所有能力,一旦状态对象变更,就能自动获得更新。
单一store和多store
store是应用管理数据的地方,在Redux应用中,我们总是将所有共享的应用数据集中在一个大的store中,而Mobx则通常按模块将应用状态划分,在多个独立的store中管理。
JavaScript对象和可观察对象
Redux默认以JavaScript原生对象形式存储数据,而Mobx使用可观察对象:
Redux需要手动追踪所有状态对象的变更;
Mobx中可以监听可观察对象,当其变更时将自动触发监听
不可变(Immutable)和可变(Mutable)
Redux状态对象通常是不可变的(Immutable):
我们不能直接操作状态对象,而总是在原来状态对象基础上返回一个新的状态对象,这样就能很方便的返回应用上一状态;而Mobx中可以直接使用新值更新状态对象。
mobx-react和react-redux
使用Redux和React应用连接时,需要使用react-redux提供的Provider和connect:
- Provider:负责将Store注入React应用;
- connect:负责将store state注入容器组件,并选择特定状态作为容器组件props传递;
对于Mobx而言,同样需要两个步骤:
- Provider:使用mobx-reac提供的Provider将所有stores注入应用;
- 使用injec将特定store注入某组件,store可以传递状态或action;然后使用
observer
保证组件能响应store中的可观察对象(observable)变更,即store更新,组件视图响应式更新。
2 .mobx优缺点:
优势:
学习成本少
面向对象编程
模版代码少
缺点:
过于自由:容易导致团队代码风格不统一,所以当团队成员较多时,确实需要添加一些约定;
可拓展,可维护性:规范的Redux更有优势,而Mobx更自由,需要我们自己制定一些规则来确保项目后期拓展,维护难易程度;
参考 你需要Mobx还是Redux?
3 .api
mobx中文文档描写的很详细