react-mobx-1

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();
    }
};

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

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

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

1. State(状态)
状态 是驱动应用的数据， 就像是有数据的excel表格。

2. Derivations(衍生)
任何源自状态并且不会再有任何进一步的相互作用的东西就是衍生。 

用户界面
衍生数据，比如剩下的待办事项的数量。
后端集成，比如把变化发送到服务器端。

MobX 区分了两种类型的衍生:

Computed values(计算值) - 它们是永远可以使用纯函数(pure function)从当前可观察状态中衍生出的值。

Reactions(反应) - Reactions 是当状态改变时需要自动发生的副作用。
需要有一个桥梁来连接命令式编程(imperative programming)和响应式编程(reactive programming)。
它们最终都需要实现I / O 操作。
黄金法则: 如果你想创建一个基于当前状态的值时，请使用 computed。

3. Actions(动作)
动作 可以改变状态的代码。用户事件、后端数据推送、预定事件、等等。
如果是在严格模式下使用 MobX的话，MobX 会强制只有在动作之中才可以修改状态。

原则：

MobX 支持单向数据流，也就是动作改变状态，而状态的改变会更新所有受影响的视图。

当状态改变时，所有衍生都会进行原子级的自动更新，所有衍生默认都是同步更新。

计算值 是延迟更新的，所有的计算值都应该是纯净的。它们不应该用来改变状态

eg:

import {observable, autorun} from 'mobx';

var todoStore = observable({
    /* 一些观察的状态 */
    todos: [],

    /* 推导值 */
    get completedCount() {
        return this.todos.filter(todo => todo.completed).length;
    }
});

/* 观察状态改变的函数 */
autorun(function() {
    console.log("Completed %d of %d items",
        todoStore.completedCount,
        todoStore.todos.length
    );
});

/* ..以及一些改变状态的动作 */
todoStore.todos[0] = {
    title: "Take a walk",
    completed: false
};
// -> 同步打印 'Completed 0 of 1 items'

todoStore.todos[0].completed = true;
// -> 同步打印 'Completed 1 of 1 items'

猜你喜欢