Mobx 使用

为什么使用mobx？

最近项目中，使用了一种新的状态管理工具—Mobx，Mobx相较于redux之类的数据管理状态工具来说：

• 学习成本更低
• 性能更好
• mobx开发难度低
• 代码量少、渲染性能好

Mobx 安装

使用前安装Mobx所需要的依赖：mobx , mobx-react

npm install mobx --save
npm install mobx-react --save

引入使用

import { action, observable, runInAction, toJS } from 'mobx'; // 按需引入
import { inject, observer,  Provider } from 'mobx-react';

简单使用

通过项目实践，大致总结了使用mobx的几个基本步骤：
1、创建并编写store文件；
2、在父组件中，将store文件引入，并在父组件内进行new Store()；
3、通过标签将store传给子组件使用；
4、子组件使用时通过@inject('store名称')，将store注入组件中去；

一、父组件

父组件.png

二、子组件

在子组件中，使用两个装饰器，即@inject, @observer就可以实时监听获取store中的属性，当然需要注意的是：可以监听观察的属性是store中使用@observable包装定义的。如下图：

@inject

使用@inject ('store')直接注入组件中，然后直接用this.props.store获取就可以了。
这里的store是父组件中这里的store名称。

image.png

@observer

@observer在这里的作用，是用来将 React组件转变成响应式组件，以确保任何组件渲染中使用的数据变化时都可以强制刷新组件。如果不使用@observer的话，你可以试试，就算store中的数据变了，子组件也不会去刷新组件的变化。

三、store文件

store文件即mobx的主要文件，以下就使用过的关键词，进行输出。

observable

observable是一种让数据的变化可以被观察的方法。

根据下图举个，更直观。
首先，通过@observable装饰器，定义需要的属性，因为是通过@observable包装过的，所以只要config变化，在任何组件内都是可以监听到它的变化的。

store文件中定义可监听、观察的变量.png

@action

唯一可以修改状态的地方。

runInAction

总结

关与Mobx的其他关键词，还没有用到，待真实使用过在输出总结。
通过实践使用，Mobx确实是一个简单易上手的状态管理工具，若有理解不对的地方，请指正。