mobix是简单、可扩展的状态管理工具。
1 安装：npm install mobx --save，react项目中：npm install mobx-react --save
React 和 MobX 是一对强力组合。React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染。而MobX提供机制来存储和更新应用状态供 React 使用；MobX 提供了优化应用状态与 React 组件同步的机制，这种机制就是使用响应式虚拟依赖状态图表，它只有在真正需要的时候才更新并且永远保持是最新的。
安装成功后
2 概念
2-1 Observable state(可观察的状态)
MobX 为现有的数据结构(如对象，数组和类实例)添加了可观察的功能，通过使用 @observable 装饰器就可以简单地完成这一切。
import { observer } from "mobx-react";
@observer //修饰符
class Todo extends Component {
.........
}
2-2 Computed values(计算值)
使用 MobX， 你可以定义在相关数据发生变化时自动更新的值。 通过@computed 装饰器或者利用 (extend)Observable 时调用 的getter / setter 函数来进行使用。
2-3 Reactions(反应)
Reactions 和计算值很像，但它不是产生一个新的值，而是会产生一些副作用，比如打印到控制台、网络请求、递增地更新 React 组件树以修补DOM、等等。
可以创建自定义Reactions：可以使用autorun、reaction 和 when 函数即可简单的创建自定义 reactions，
autorun(() => {console.log("Tasks left: "+ todos.unfinishedTodoCount)})//如果unfinishedTodoCount变化就会执行，MobX 会对在执行跟踪函数期间读取的任何现有的可观察属性做出反应。
2-4 Actions(动作)
动作是任一一段可以改变状态的代码。用户事件、后端数据推送、预定事件、等等。 动作类似于用户在excel单元格中输入一个新的值。在 MobX 中可以显式地定义动作，它可以帮你把代码组织的更清晰。 如果是在严格模式下使用 MobX的话，MobX 会强制只有在动作之中才可以修改状态。
MobX解析-数据单流向
网友评论