MST(mobx-state-tree)、redux做多组件间全局state管理（类比vuex，父 孙组件状态传递解耦）。
tree = type + state
树中的每个节点都由两件事来描述: type (事物的形状) 和 data (它当前所处的状态).
最简单的树如下所示：
1.声明类型为`Root`的节点的形状`。model是一个types中最重要的一个type，使用types.model方法得到的就是Model，在Model中，可以包含多个type或者其他Model。
//定义type
const Root = types.model("Root", { str: types.string }); //定义模型形状（name为Root，props为{ str: types.string }）
2.基于“Root”类型创建一个具有初始状态和env的树。通过树可执行action等。Model.create可以传入两个参数，第一个是Model的初始状态值，第二个参数是可选参数，表示需要给Model及子Model的env对象（环境配置对象），env用于实现简单的依赖注入功能。
//创建model实例
const root = Root.create({str: "test"}, env); //创建model, 传入初始状态值 和 env环境配置对象参数。
root.setStr("mst");//调用action
observer 函数/装饰器可以用来将 React 组件转变成响应式组件。 它用 mobx.autorun 包装了组件的 render 函数以确保任何组件渲染中使用的数据变化时都可以强制刷新组件。 observer 是由单独的 mobx-react 包提供的。@observer 只会增强你正在装饰的组件，而不是内部使用了的组件。 所以通常你的所有组件都应该是装饰了的。但别担心，这样不会降低效率，相反 observer 组件越多，渲染效率越高。
当 observer 需要组合其它装饰器或高阶组件时，请确保 observer 是最深处(第一个应用)的装饰器，否则它可能什么都不做。
实现UI组件尽可能地使用observer装饰组件
使用mobx-react包提供的observer装饰器装饰后的组件能响应observable的变化，并做了诸多的性能优化，尽可能为你的组件加上observer，除非你想要自定义shouldComponentUpdate来控制组件更新时机。
React.shouldComponentUpdate() 方法会返回一个布尔值，指定 React 是否应该继续渲染，默认值是 true， 即 state 每次发生变化组件都会重新渲染。
@observer
export class TableContent extends React.Component<TableContentProps> { }
尽可能地编写无状态组件
有的同学可能看到过类似这样的说法： 用Redux管理全局状态，用组件State管理局部状态。
笔者不认同这种说法，根据笔者的经验来看，当项目复杂到一定的程度，使用State管理的状态会难受到让你抓狂：某个深层次的组件State只能通过改变上层组件传递的props来进行更新。
更何况，现在无状态（state less）组件越来越受到大家的认可，react hooks的出现也顺应了组件无状态的这个发展趋势。
当应用都由无状态组件构成，应用的状态都存储在触手可及的地方（如Redux或MST），想要在某些时刻修改某个状态值就变得轻而易举。
types
MST提供的一个重要对象就是types，在这个对象中，包含了基元类型（primitives types），如string、boolean、number，还包含了一些复杂类型的工厂方法和工具方法，常用的有model、array、map、optional等。
MST可用的类型和类型方法非常多，这里主要介绍model类型，其他的可以在这里查看：类型概述 ·MobX状态树 (mobx-state-tree.js.org)
model是一个types中最重要的一个type，使用types.model方法得到的就是Model，在Model中，可以包含多个type或者其他Model。
一个Model可以看作是一个节点（Node），节点之间相互组合，就构造出了整棵状态树（State Tree）。
types.model 创建一个可链接的model类型，其中每个链接方法都会生成一个新类型：
.named(name)克隆当前类型，但为其指定一个新名称
.props(props)基于当前类型生成新类型，并添加/重写指定的属性
.actions(self => object literal with actions)基于当前类型生成一个新类型，并添加/覆盖指定的操作
.views(self => object literal with view functions)基于当前类型生成新类型，并添加/覆盖指定的视图函数
.preProcessSnapshot(snapshot => snapshot)可用于在实例化新模型之前对原始 JSON 进行预处理。
.postProcessSnapshot(snapshot => snapshot)可用于在获取模型快照之前对原始 JSON 进行后处理。
props
props指的是Model中的属性定义。props定义了这个Model维护的状态对象包含哪些字段，各字段对应的又是什么类型。
props中value可以是：
1.一种类型（可以是一个简单的基元类型 或者 复杂类型，也可以是一个预定义类型）：
export const Test= types.model("name", {price: types.number});//第一个参数为name属性定义，第二个参数为props属性定义
//等同于
export const Test= types.model("name").props({price: types.number})
//预定义类型Todo
const Test= types.model("name").props({todos: types.array(Todo)})
2.基元
//使用基元作为类型 是 引入具有默认值的属性的语法糖(基元类型是从默认值推断出来的)
const Test= types.model("name").props({endpoint: "http://localhost"}) //等价于endpoint: types.optional(types.string, "http://localhost")
views
views是Model中一系列衍生数据或获取衍生数据的方法的集合，类似Vue组件的computed计算属性。
在定义Model时，可以使用model.views方法定义views
export const ProductItem = types
.model("ProductItem", {
prodName: types.string,
price: types.number,
discount: types.number,
})
.views(self => ({
get priceAfterDiscount () {
return self.price - self.discount;
}
}));
const productItem= ProductItem.create({price: 1});
productItem.priceAfterDiscount();
上面代码中，定义了priceAfterDiscount，表示商品的折后价格。调用.views方法时，传入的是一个方法，方法的参数self是当前Model的实例，方法需要返回一个对象，表示Model的views集合。
需要注意的是，定义views时有两种选择，使用getter或者不使用。使用getter时，衍生数据的值会被缓存直到依赖的数据发送变化。而不使用时，需要通过方法调用的方式获取衍生数据，无法对计算结果进行缓存。尽可能使用getter，有助于提升应用的性能
actions
actions是用于更新状态的方法集合。在安全模式下，所有对状态的更新操作必须在actions中执行，否则会报错
const Root = types
.model("Root", {
str: types.string,
})
.actions(self => ({
setStr (val: string) {
self.str = val;
},
afterCreate () {
// 执行一些初始化操作
}
}));
const root = Root.create({str: "test"});
root.setStr("mst");
除了通常意义上用来更新状态的actions外，在model.actions方法中，还可以设置一些特殊的actions：
afterCreate
afterAttach
beforeDetach
beforeDestroy
从名字上可以看出来，上面四位都是生命周期方法，可以使用他们在Model的各个生命周期执行一些操作
异步Action
异步更新状态是非常常见的需求，MST从底层支持异步action。
const model = types
.model(...)
.actions(self => ({
async getData () { // async/await
try {
const data = await api.getData();
} catch (err) {
}
},
// promise
updateData () {
return api.updateData()
.then(...)
.catch(...);
}
}));
若使用Promise、async/await来编写异步Action，在异步操作之后更新状态时，代码执行的上下文会脱离action，导致状态在action之外被更新而报错。解决办法：编写一个runInAction的action将更新状态的操作放到runInAction中执行。
const Model = types
.model(...)
.actions(self => ({
runInAction (fn: () => any) {
fn();
},
async getData () {
self.runInAction(() => self.loading = true);
const data = await api.getData();
self.runInAction(() => {
self.data = data;
self.loading = false;
});
}
}));
但是在某些情况下，这种方法不够完美：一个异步action被分割成了N个action调用，无法使用MST的插件机制实现整个异步action的原子操作、撤销/重做等高级功能。为了解决这个问题，MST提供了flow方法来创建异步action：
import { types, flow } from "mobx-state-tree";
const model = types
.model(...)
.actions(self => {
const getData = flow(function * () {
self.loading = true;
try {
const data = yield api.getData();
self.data = data;
} catch (err) {
}
self.loading = false;
});
return {
getData
};
})
使用flow方法需要传入一个generator function，在这个生成器方法中，使用yield关键字可以resolve异步操作。并且，在方法中可以直接给状态赋值，写起来更简单自然。
Snapshot
snapshot即“快照”，表示某一时刻，Model的状态序列化之后的值。这个值是标准的JS对象。
使用getSnapshot方法获取快照：applySnapshot方法可以更新Model的状态.
import { getSnapshot, applySnapshot } from "mobx-state-tree";
cosnt Model = types.model(...);
const model = Model.create(...);
console.log(getSnapshot(model));
applySnapshot(model, {
msg: "hello"
});
getSnapshot及applySnapshot方法都可以用在Model的子Model上使用。
Volatile State
在MST中，props对应的状态都是可持久化的，也就是可以序列化为标准的JSON数据。并且，props对应的状态必须与props的类型相匹配。
如果需要在Model中存储无需持久化，并且数据结构或类型无法预知的动态数据，可以设置为Volatile State。Volatile State使用model.volatile方法定义：
import { types } from "mobx-state-tree";
import { autorun } from "mobx";
const Model = types
.model("Model")
.volatile(self => ({
anyData: {} as any
}))
.actions(self => ({
runInAction (fn: () => any) {
fn();
}
}));
const model = Model.create();
autorun(() => console.log(model.anyData));
model.runInAction(() => {
model.anyData = {a: 1};
});
model.runInAction(() => {
model.anyData.a = 2;
});
和actions及views一样，model.volatile方法也要传入一个参数为Model实例的方法，并返回一个对象。
代码中使用Mobx的autorun方法监听并打印model.anyData的值，一共看到2次输出：
anyData的初始值
第一次更新anyData后的值
但是第二次为anyData.a赋值并没有执行autorun。
由此可见，Volatile State的值也是Observable，但是只会响应引用的变化，是一个非Deep Observable。
