React使用Mobx管理数据

React 和 Vue一样都属于单向数据流，为了更好的进行状态和数据管理官方和第三方也有配套的Redux等插件，本文介绍一个个人觉得更易用使用的组件 Mobx

核心概念

MobX 处理你的应用程序状态如下图所示

常用的几个装饰器 （装饰器解释)

• Actions: 改变state的操作。

• ObservableState:应用的可被观察的数据状态。

• Computed: 从state中通过纯函数的操作衍生出的值，state变化它也会跟着变化。

• Reactions：需要对state变化动态作出反应的东西，它包含不同的概念，基于被观察数据的更新导致某个计算值，或者是发送网络请求以及更新视图等，都属于响应的范畴，这也是响应式编程在 JavaScript 中的一个应用。

• Autorun: 依赖收集，监听触发，autorun 背后由 reaction 实现。由于 autorun 与 view 的 render 函数很像，我们在 render 函数初始化执行时，使其包裹在 autorun 环境中，第 2 次 render 开始遍剥离外层的 autorun，保证只绑定一遍数据。这样 view 层在原本 props 更新机制的基础上，增加了 autorun 的功能，实现修改任何数据自动更新对应 view 的效果。（ps:使用autoRun实现Mobx-react非常简单，核心思想是将组件外面包上autoRun，这样代码中用到的所有属性都会像上面Demo一样，与当前组件绑定，一旦任何值发生了修改，就直接forceUpdate，而且精确命中，效率最高。）

React项目中Mobx的安装

npm或yarn安装插件

npm install mobx-react --save

或者

yarn add mobx-react --save

装饰器的启用，装饰器目前仍处于提案阶段因此需要做特殊处理

修改package.json添加如下引用，这个和npm手动安装一个道理

"@babel/core": "^7.1.0",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-proposal-decorators": "^7.1.0",
    "@babel/preset-env": "^7.1.0"

使用npm run eject确认显示所有隐藏的配置文件

注意此步骤不可逆

在根目录创建.babelrc文件，添加如下内容

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins":  [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
}

删除package.json中babel配置

几个核心装饰器的解释

@observable 创建需要被监听的应用状态

通过对Class的属性简单的使用@observable修饰符，就定义了一个需要被监听的应用状态变量；然后直接在类中定义对应用状态变量的操作；我们就实现了一个灵活的Store层

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import TodoBox from './Welcome';
import {observable, action} from 'mobx';

class Store{

    @observable todos=[{
        key:1,
        title: "todo标题",
        done: false,
    },{
        key:2,
        title: "todo-2",
        done: false,
    }];
}

如上面代码所示，Store是一个store层的类，用来对状态进行管理

@observer 创建应用状态的监听者

有多种方式可以创建应用状态的监听者(Reactions)，包括autorun、reaction、@observer等

此处示例显示如何用@observer来监听

import React, {Component} from 'react';
import {observer} from "mobx-react";
import {action} from "mobx";

@observer
class TodoBox extends Component {

    /**
     *
     * @param props
     */
    constructor(props) {
        super(props);
    }

    render() {

        const store=this.props.store;
        return (
            <div>
                <ul>
                    {store.todos.map((todo,_) => <li>{todo.title}</li>)}
                </ul>

            </div>
        )
    }
}

export default TodoBox;

@action

可以看到之前的监听模式下，其实完全可以直接通过store层对数据进行读取和写入，虽然很便捷但却打破了单向数据流向的原则，Mobx也考虑到这点所以特意设计了action，并且要求用户尽可能的使用action来设定更改状态和数据的方法

class Store{

    @observable todos=[{
        key:1,
        title: "todo标题",
        done: false,
    },{
        key:2,
        title: "todo-2",
        done: false,
    }];

    @action
    changeTitle(){
        // 直接修改仓库中的状态值
        this.todos[0].title = "修改后的todo标题"
    }
}

完整Demo

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import TodoBox from './Welcome';
import {observable, action} from 'mobx';

class Store{

    @observable todos=[{
        key:1,
        title: "todo标题",
        done: false,
    },{
        key:2,
        title: "todo-2",
        done: false,
    }];

    @action
    changeTitle(){
        // 直接修改仓库中的状态值
        this.todos[0].title = "修改后的todo标题"
    }
}

const store1=new Store();

ReactDOM.render(<TodoBox store={store1} />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

import React, {Component} from 'react';
import {observer} from "mobx-react";
import {action} from "mobx";

@observer
class TodoBox extends Component {

    /**
     *
     * @param props
     */
    constructor(props) {
        super(props);
    }

    render() {

        const store=this.props.store;
        return (
            <div>
                <ul>
                    {store.todos.map((todo,_) => <li>{todo.title}</li>)}
                </ul>
                <div>
                    <input type="button" onClick={() => {

                        this.props.store.changeTitle();
                        // // 直接修改仓库中的状态值
                        // this.props.store.todos[0].title = "修改后的todo标题"
                    }} value="点我"/>
                </div>

            </div>
        )
    }
}

export default TodoBox;