Mobx 的一些基本概念

MOBX

简单、可扩展的状态管理任何源自应用状态的东西都应该自动地获得。其中包括UI、数据序列化、服务器通讯，等等

MobX 中文文档

几个核心的盖面

Observable state(可观察的状态)

Computed values(计算值)

---

使用 MobX， 你可以定义在相关数据发生变化时自动更新的值。 通过@computed 装饰器或者利用 (extend)Observable 时调用 的getter / setter 函数来进行使用。

Reactions(反应)

---

Reactions 和计算值很像，但它不是产生一个新的值，而是会产生一些副作用，比如打印到控制台、网络请求、递增地更新 React 组件树以修补DOM、等等。 简而言之，reactions 在 响应式编程和命令式编程之间建立沟通的桥梁。

React 组件

---

如果你用 React 的话，可以把你的(无状态函数)组件变成响应式组件，方法是在组件上添加 observer 函数/ 装饰器. observer由 mobx-react 包提供的。

import React, {Component} from 'react';import ReactDOM from 'react-dom';import {observer} from "mobx-react";@observerclass TodoListView extends Component {    render() {        return <div>            <ul>                {this.props.todoList.todos.map(todo =>                    <TodoView todo={todo} key={todo.id} />                )}            </ul>            Tasks left: {this.props.todoList.unfinishedTodoCount}        </div>    }}const TodoView = observer(({todo}) =>    <li>        <input            type="checkbox"            checked={todo.finished}            onClick={() => todo.finished = !todo.finished}        />{todo.title}    </li>)const store = new TodoList();ReactDOM.render(<TodoListView todoList={store} />, document.getElementById('mount'));