MobX基础理解

Posted 2020-09-01

一、介绍

MobX一个状态管理工具，由redux作者亲荐。相比redux来说，更简单，更灵活。

二、核心概念

１．State　状态

state即数据，包括从服务端获取的数据，本地控制组件状态的数据

２．Derivations 派生

任何无需进一步交互的，由state演变而来的都称之为派生（好难翻译）。派生有很多存在形式：

• 用户接口
• 派生数据，例如一个列表的length
• 后端集成例如向服务端发送请求

MobX有两种类型的派生:

• 计算属性。基于state计算出的一些属性。例如一个任务列表的length。
• Reactions，state改变时，Reactions会自动执行。运用场景应该是，我们有时候需要在一个状态改变后执行某些操作。

有些初学者喜欢频繁的使用Reactions，但是如果你只是想基于state计算出一些属性，最好使用计算属性。

3. Actions

action就是改变state的代码。action就像是一个用户在单元格里输入一个新值。

明确定义你的action，这可以让你的代码结构更加清晰。在严格模式下，修改state的函数如果没有包裹在actions内，Mobx就不会执行state的修改操作。

换句话说，就是修改state的函数最好包裹在action内，这样可以让你清楚的知道什么地方是在修改状态，方便维护和调试。

三、使用MobX的要领

１．定义你的状态并让它变为可观察的。

状态可以是任意结构的，例如数组或对象。即使是嵌套的数据结构或者引用都没关系。只要你确保，你有想要改变的状态都能被mobx转为可观察的。

import {observable} from ‘mobx‘;
var appState = observable({
    timer: 0
});

２．创建能响应状态变化的视图

import {observer} from ‘mobx-react‘;

@observer
class TimerView extends React.Component {
    render() {
        return (<button onClick={this.onReset.bind(this)}>
                Seconds passed: {this.props.appState.timer}
            </button>);
    }

    onReset () {
        this.props.appState.resetTimer();
    }
};

React.render(<TimerView appState={appState} />, document.body);

３．修改状态

以下代码每隔一秒就会改变你的数据，UI也会随之更新。以下是两个修改状态的例子。

appState.resetTimer = action(function reset() {
    appState.timer = 0;
});

setInterval(action(function tick() {
    appState.timer += 1;
}), 1000);

四、规则

MobX支持单向数据流。

当状态改变时，所有的派生都会自动更新。这就意味着MobX永远都不可能观察到中间值。

所有的派生默认都是同步更新的。这意味着ations能够在修改状态后，安全可靠地观察计算属性。

计算属性都是懒更新的。只要没有用到这个计算属性，它就不会被更新。如果视图从始至终都没有用到这个计算属性，它就会被自动回收。