mobx

一、mobx 能干什么

使用 react 写小型应用，数据、业务逻辑和视图的模块划分不是很细是没有问题的。在这个阶段，引入任何状态管理库，都算是奢侈的。但是随着页面逻辑的复杂度提升，在中大型应用中，数据、业务逻辑和视图，如果不能很好的划分，就很有可能出现维护难、性能低下的问题。 业内比较成熟的解决方案有 redux，但是 redux 使用过程中，感觉较复杂和繁琐。那么为什么不简单一点呢？mobx 的核心理念是 简单、可扩展的状态管理库。 react 关注的状态(state)到视图(view)的问题。而 mobx 关注的是状态仓库（store）到的状态(state)的问题。

二、 mobx核心概念

@observable 和 @observer被观察者和观察者，不过这里使用了，ES7 中的 装饰器。

1、observable

使用 @observable 可以观察类的值。这里使用 @observable 将 Store 的 todos 变为一个被观察的值。

 class Store { @observable todos = [{ title: "todo标题", done: false, }]; }

2、observer

使用 @observer ，将组件变为观察者，响应 todos 状态变化。 当状态变化时，组件也会做相应的更新。

@observer class TodoBox extends Component { render() { return ( <ul> {this.props.store.todos.map(todo => <li>{todo.title}</li>)} </ul> ) } }

3、写入状态

直接写入

@observer class TodoBox extends Component { render() { return ( <div> <ul> {this.props.store.todos.map( (todo,index) => <li key={index}>{todo.title}</li> )} </ul> <div> <input type="button" onClick={() => { // 直接修改仓库中的状态值 this.props.store.todos[0].title = "修改后的todo标题" }} value="点我"/> </div> </div> ) } }

细心的朋友一定发现了奇怪的地方，react 官方说过 props 值不能直接修改，但是引入 mobx 后 props 可以直接修改了，这太奇怪了！解决办法就是 mobx 的下一个概念 action。

4、actions

将修改被观测变量的行为放在action中。

class Store { @observable todos = [{ title: "todo标题", done: false, }]; @action changeTodoTitle({index,title}){ this.todos[index].title = title } }

5、computed values

在有些时候，state 并不一定是我们需要的最终数据。例如，所有的 todo 都放在 store.todos 中，而已经完成的 todos 的值(store.unfinishedTodos)，可以由 store.todos 衍生而来。对此，mobx 提供了 computed 装饰器，用于获取由基础 state 衍生出来的值。如果基础值没有变，获取衍生值时就会走缓存，这样就不会引起虚拟 DOM 的重新渲染。通过 @computed + getter 函数来定义衍生值（computed values）。

 class Store { @observable todos = [{ title: "todo标题", done: false, },{ title: "已经完成 todo 的标题", done: true, }]; @action changeTodoTitle({index,title}){ this.todos[index].title = title } @computed get finishedTodos () { return this.todos.filter((todo) => todo.done) } }

mobx 有一套机制，如果衍生值（computed values）所依赖的基础状态（state）没有发生改变，获取衍生值时，不会重新计算，而是走的缓存。因此 mobx 不会引起过度渲染，从而保障了性能。 当渲染的值为 finishedTodos ，点击修改标题，不会在控制台打印 “render”; 换成 todos，就会打印 “render”. 这是由于已完成的 todos 值没有改变，所以不会重新计算，而是走的缓存。因此不会调用 render 方法。

三、 项目中配置

1、需要安装babel-plugin-transform-decorators-legacy

2、在配置中"plugins": ["transform-decorators-legacy"]