入门 MobX 的使用作为一个状态管理的工具，相比于 Rudex，MobX 没那么多条条框框，什么 action red

作为一个状态管理的工具，相比于 Rudex，MobX 没那么多条条框框，什么 action reducer 不可变数据… 直接改数据（然后视图更新）就完啦

先把它这库添加到项目中

yarn add mobx-react-lite
yarn add mobx

状态

创建一个状态文件，去定义状态

在 constructor 方法里，执行了一个 makeAutoObservable 方法，它的作用就是 make 所有的自身属性为 observable

视图

接下修改视图层的代码，用 mobx-react-lite 提供的 observer 包裹组件

observer 检查到模板里使用了 observable 数据，就会处理响应：当 observable 变化的时候，触发组件的重新渲染

The observer converts a component into a reactive component, which tracks which observables are used automatically and re-renders the component when one of these values changes. Can only be used for function components. For class component support see the mobx-react package.

对于没有被 Redux 洗脑过的同学

上面Mobx这个状态管理的流程，只干了两件事

• 数据：将数据变成 observable
• 用数据的地方：对（用到状态的）视图用 observer 包裹

这就完成了所谓的状态管理

当我们调用 counterStore 实例的 increment 方法，其 count 属性会被更新，视图自动渲染为最新的状态

（对于用过 redux 的同学：这什么玩意儿？！

其他

添加衍生数据

在 makeObservable 的时候，为 getter 添加 computed 注解，使 douableCount 成为一个计算值（衍生数据）

计算值可以用来从其他可观察对象中派生信息。 计算值采用惰性求值，会缓存其输出，并且只有当其依赖的可观察对象被改变时才会重新计算。 它们在不被任何值观察时会被暂时停用。

参考

www.mobxjs.com/react-integ…

github.com/mobxjs/mobx…