React状态管理库Mobx

Mobx和Redux相似，是状态管理工具。Mobx本身和React无关，但也提供了React绑定库。与Redux相比，Mobx更像是为React而生。

要做什么

做一个非常简单的计算器，只需要可以计算加法。页面上有两个输入框，要求计算结果可以实时响应用户的输入，即在输入框输入数字，后面立即显示计算结果。

环境准备

安装Moxb模块：

安装支持装饰器的mobx preset：

运行eject命令弹出配置：

在package.json中配置preset：

未使用Mobx

代码似乎比较简单，先导入模块：

把渲染函数写出来：

然后写App组件的内容，定义：

构造函数初始化状态，一共三个属性：

inputHandler()是input事件的处理函数，这里使用受控组件来获取数据：

使用计算属性根据输入，更新相应的属性值，并计算更新sum的值。最后是渲染到页面的内容：

代码就这么多，运行程序试一下效果吧！

没错，程序是错的，React官方的文档里明确指出，页面的渲染值不应该依赖状态，因为状态的更新是异步的。

解决这个问题也很简单，将setState()的传入参数改为函数即可。对inputHandler()做一些修改：

现在的程序就能实现功能了。

使用了Mobx

与未使用Mobx相比，使用Mobx最大的不同就是将状态从组件中抽离出来单独管理，这也正是状态管理库的初衷。

首先导入模块：

创建状态类，再由类生成对象：

因为装饰器用于类，所以首先定义类，再实例化出对象。这里的store不像Redux中的store，拥有一些内置方法。Mobx中的action不需要dispatch。

@observable装饰器标识一个可监听的对象，@computed装饰器会自动计算监听对象的动作，与Vue.js的计算属性有相似之处。

在渲染函数中，就得将store传入组件：

在App中使用store：

@observer装饰器来自mobx-react模块，用于将React组件变成响应式组件。

组件内容除了不再初始化状态，以及调用属性的位置不同，与不使用Mobx差异不大。其实这正说明了Mobx的简单易用。

如果将Mobx与Redux做对比，Redux就要繁琐一些了，Redux中store、reducer、action缺一不可。