React Mobx

我们之前用的是 redux 来做的统一 store，最近一个新项目有同学用了 mobx，就了解了一下，刚开始看的时候，感觉比 redux 好啊？

mobx 的逻辑是自动收集 store 属性被哪些 dom 使用，然后在属性被改变的时候，自动更新 dom。这样的模式显然比 redux 的 action，reducer，selector 那一套简单多了。

给对应的组件加上 @observer 装饰器之后，store 改变就会自动重现渲染组件。store 可以用下面的模式给到组件

const store = new TodoList();
<TodoListView todoList={store} />

也可以用 @inject 装饰器

@inject(store => store)
@observer
class TodoListView {
}

之后都通过 this.props 引用。

一切都很美好，直到我看到了这个，这里列了一些 mobx 的坑。比如有讲到，mobx 为了能监控到对 store 的依赖和修改，其实是把 store 属性做了修改，所以 store 有一个属性是一个 Map，那么实际得到的是一个和 ES6 Map api 类似的一个对象，但是并不是原生的 Map。比如有一个属性是 Object，你给加了一个 key，例如 store.object['a'] = 'test'，那么这个修改并不能被监视，具体看那个文档吧。

写 Javascript 基本就是从一个小坑爬出来掉到一个大坑里面。