共计 1546 个字符，预计需要花费 4 分钟才能阅读完成。
Mobx 是什么？
Mobx 是一个状态治理库。
Mobx 哲学
任何源自利用状态的数据都应该主动地获取。
“Anything that can be derived from the application state, should be derived. Automatically.”
Mobx 准则
Mobx 反对单向数据流，即动作更新状态，状态更新视图。
为什么将 React 和 Mobx 联合应用？
对于利用开发中常见的问题，React 和 Mobx 都给出了最优和独特的解决方案：
React 通过应用虚构 DOM 对 UI 渲染进行了优化；
Mobx 通过应用响应式状态图表，将利用状态与 React 组件同步的机制进行了优化，即只有在状态更新的时候才对组件做出扭转。
归根结底，React 组件只是状态的富丽展现，而状态的衍生能够由 Mobx 来治理。
Mobx 外围概念
1. Observable state（可察看的状态）
Mobx 为现有的数据结构提供了可察看的性能，被察看的数据能够是原始值，也能够是援用值。
2. Computed values（计算值）
计算值个别通过观察值 衍生，当察看值扭转的时候，计算值会自动更新，并在它不再应用时将其优化掉。
衍生：任何源自状态并且不会有进一步相互作用的货色就是衍生。衍生能够有多种形式存在，比方：用户界面、衍生数据
class TodoList {
@observable
todos = [];
@computed
get unfinishedTodoCount() {return this.todos.filter(todo => !todo.finished).length;
}
}3. Reactions（反馈）
Reactions 会对 state 变动作出反应，但它不是产生一个值，而是产生一些 副作用，比方更新 UI。能够通过应用 Mobx 提供的 when、autorun、reaction 来创立自定义的 Reactions。
副作用：一个行为通常有一个指标作用，如果这个行为产生了其余的作用，都被成为副作用。比如说 Array.concat() 的设计指标是做数组拼接，然而也能够用来进行数组复制：const arr = [1, 2, 3]; const copy = arr.concat()，那么这个复制的作用就能够被称为副作用。
4. React 组件
能够通过给 React 组件增加 observer 装璜器（由 mobx-react 提供），将无状态组件变成响应式组件。
Mobx 对何作出反应？
MobX 会对在 追踪函数 执行 过程 中读取 现存的可察看属性做出反馈。
- 追踪函数：包含 computed 表达式；observer 组件的 render() 办法；when、reaction 和 autorun 办法的第一个入参函数。
- 读取：对象属性的间接援用（user.name 或者 user[‘name’]）。
- 过程：只追踪在函数执行时被读取的 observable 值，这些值是否由追踪函数间接或间接应用并不重要。
1. 正确的
- 在追踪函数内进行间接援用
- 在追踪函数内拜访数组属性或者办法
- 应用映射中还不存在的项（Map）
2. 谬误的
- 在追踪函数外进行间接援用
- 一个援用了 observable 对象或者 observable 对象援用的变量，这个变量是不可察看的
- 在追踪函数内数组索引越界拜访
- 应用了 ”observable” 但没有拜访它的任何属性
- 应用了 observable 对象中还不存在的属性
3. 注意事项：
- 如果给一个组件传入了一个参数（参数是 observable 的值），为了确保该组件可能正确做出反馈，该组件也应该是 observer，然而如果这个组件来源于内部库，咱们就没法管制了，这时能够应用 observer 包裹参数或者利用 <Observer> 组件来解决这个问题。例子
- 多个组件进行参数传递，出于性能思考，越晚进行间接援用越好。例子
[了解 Mobx 对何作出反应]
