MobX学习笔记

一、简单介绍

一种简单、可扩展的状态管理。

 

React 和 MobX 是一对强力组合。

React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染。

而MobX提供机制来存储和更新应用状态供 React 使用。

对于应用开发中的常见问题，React 和 MobX 都提供了最优和独特的解决方案。

React 提供了优化UI渲染的机制， 这种机制就是通过使用虚拟DOM来减少昂贵的DOM变化的数量。

MobX 提供了优化应用状态与 React 组件同步的机制，这种机制就是使用响应式虚拟依赖状态图表，它只有在真正需要的时候才更新并且永远保持是最新的。

 二、Redux与Mobx的比较

1、开发难度低：redux的API是函数风格，原理和思想很简单，但是对于新手不易使用。而mobx采用语意更丰富的响应式风格（是一种面向数据流和变化传播的编程方式），对面向对象匹配更简略的API方法，集成度比redux更高，减少引入第三方库。

2、开发代码少：redux引入了action、reducer、store，每增加一个状态都需要更新这些位置。而mobx只需要在store里面更改即可。

3、渲染能力好：redux组件中编写shouldcomponentupdate方法可以避免不必要的重渲染，提升页面性能。但数据层次很复杂时，实现起来会很麻烦。mobx能精确哪些组件重渲染，哪些不渲染，通过合理的组织组件层级和数据结构位置。可以轻易地将组件重渲染限制到最小范围内。

三、常用标签

@observable：使用此标签监控要检测的数据。（被观察者）

@observer：使用此标签监控当数据变化是要更新的component组件类（观察者）

@action：使用此标签监控数据改变的自定义方法（当在需要数据改变的时候执行此定义方法。那么View层也会跟着自动变化，默认此View层已经使用@observer标签监控）

@inject：使用此标签表示注入相关的store对象，使得当前组件可以从state获取store对象。如不使用此标签，则组件无法获取store对象。