mobx实战，几分钟入门

mobx是啥

估计你们也知道是啥了，就一个状态管理，然后这东西没out，挺多人/项目都用，也就有学的必要了。

效果就是给目标组件实现一个双向绑定的效果：仓库数据变了，用到改数据的组件会自动重新渲染

mobx、mobx-react、mobx-react-lite区别

mobx和mobx-react是搭配使用的。
mobx-react包含了lite，后者只能用于函数组件，也就是轻量版（从名字也能看出），二选一即可。

整体大概用法

1. 声明你的状态仓库，一个类来的
2. 在app.jsx中给所有子组件包括一层mobx的组件
3. 组件引入类、一个mobx方法即可

实践

git仓库代码
代码简单不花点点心思下载代码看是没用的。截图形式略捞

先从app.js去看。会有三个子组件（button1/2/3)，其中一个是class组件，其余是function组件。

页面目的：
点击button1或button2会修改button3的内容。

发现规律

1. button1修改值后，3渲染了一次。2再修改一次同样的值，3不会再次渲染
2. button1修改值后，button1、button2不会重新渲染。

从规律得出结论
也就是说这个和vue订阅通知一样，能够准确通知到哪个组件的值修改了，我才更新那个组件。【mobx源码就不看了，vue的才值得看】总之就是性能OK，所以才敢在app.js就统一包裹一层

踩坑点：

1. 装饰器用法是需要babel处理一下才支持
   npm install --save-dev @babel/plugin-proposal-decorators
   然后看package.json下面的babel配置，也可以写webpack中。【代码不贴这里了，有心学就去仓库】
2. mobx6版本以上，状态仓库代码中代码有点不同，我写了备注的。src/stores/user。这个会导致一个问题就是：数据更新了，组件没有重新渲染，

 //mobox版本大于6就要这个
    constructor() {
        makeObservable(this);
    }
1
2
3
4
5