简单、可扩展的状态管理
安装
npm install mobx --save
React绑定库:
npm install mobx-react --save
入门
mobx的优势:任何源自应用状态的东西都应该自动地获得。MobX 提供了优化应用状态与 React 组件同步的机制,这种机制就是使用响应式虚拟依赖状态图表,它只有在真正需要的时候才更新并且永远保持是最新的。
核心概念
1.Observable State(可观察的状态)
1.1observable.map(键值对形式)
const map = observable.map({key:"value"})
//获取
map.get("key")
//修改
map.set("key","new value")
1.2数组形式,或者对象形式
const list = observable([1,2,3])
list[0]=10
console.log(list[0])
1.3 基本数据类型
const temperature = observable.box(20)
temperature.set(30)
console.log(temperature.get())
const list = observable([1,2,3])
console.log(list[0])
1.4@observable 装饰器
装饰器可以在 ES7 或者 TypeScript 类属性中属性使用,将其转换成可观察的。
1.5 对observable做出响应
computed:computed(function) 创建的函数只有当它有自己的观察者时才会重新计算,否则它的值会被认为是不相关的
autorun:当使用 autorun 时,所提供的函数总是立即被触发一次,然后每次它的依赖关系改变时会再次被触发。如果你有一个函数应该自动运行,但不会产生一个新的值,请使用autorun
2.Computed values(计算值)
3.Reactions(反应)
MobX 会对在执行跟踪函数期间读取的任何现有的可观察属性做出反应。
4.Actions(动作)