Mobx入门(一)

Mobx是什么

MobX实现简单、可扩展的状态管理。

使用MobX将应用变成响应式可归纳为三部曲：

定义状态并使其可观察 (Observable)
创建视图以响应状态的变化 (observer)
更改状态(action)

安装

cnpm install --save mobx mobx-react

概念

Observable

Observable 值可以是JS基本数据类型、引用类型、普通对象、类实例、数组和映射。

返回相应的Observable对象

import {observable} from 'mobx';

const map = observable.map({ key: "value"});
map.set("key", "new value");

const list = observable([1, 2, 4]);
list[2] = 3;

const person = observable({
    firstName: "Clive Staples",
    lastName: "Lewis"
});
person.firstName = "C.S.";

const temperature = observable.box(20);
temperature.set(25);

import {observable} from 'mobx';

let appState = observable({
    timer: 0
});

observer

使用mobx-react observer() 来包裹 React 组件，形成了observer。

import { observer } from 'mobx-react';

let App = observer(({ appState }) => {
    return (
        <div className="App">
            <h1>Time passed: {appState.timer}</h1>
        </div>
    );
});

or

import { observer } from 'mobx-react';

@observer
class App extends React.Component {
  render() {
    return (
      <div>
         <div className="App">
            <h1>Time passed: {this.props.appState.timer}</h1>
        </div>
      </div>
    );
  }
};

ReactDOM.render(<App appState={appState} />, document.getElementById('root'));

action

action 用来改变 observable的状态。

import { observable, action } from 'mobx';
var appState = observable({
    timer: 0
});
appState.resetTimer = action(function reset() {
    appState.timer = 0
});
appState.addTimer = action(function add() {
    appState.timer++
});
let App = observer(({ appState }) => {
    return (
        <div className="App">
            <button onClick={appState.resetTimer}>
                Seconds passed: {appState.timer}
            </button>
            <button onClick={appState.addTimer}>
                +
            </button>
        </div>
    );
});
ReactDOM.render(<App appState={appState} />, document.getElementById('root'));

需要注意的是，observable的状态不仅仅可以通过action改变。

对比Mobx和Redux

• 相比Redux，Mobx 省略了很多代码量
• Redux的状态管理更严格
• Mobx 可以设置多个store，Redux只能设置一个
• Mobx 对性能更友好 （观察者模式 vs Object.assign()）