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 对何作出反应]