脑子疼,前一段时间工作太忙,忙完一阵子就生病了,脑子疼
前端的工作时间接触了很多新东西,最近整理了一番
Mobx :总算找到合适的概括mobx的词了: 状态管理库
React 和 MobX 是一对强力组合。React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染。而MobX提供机制来存储和更新应用状态供 React 使用。
对于应用开发中的常见问题,React 和 MobX都提供了最优和独特的解决方案。React 提供了优化UI渲染的机制, 这种机制就是通过使用虚拟DOM来减少昂贵的DOM变化的数量。MobX 提供了优化应用状态与 React 组件同步的机制,这种机制就是使用响应式虚拟依赖状态图表,它只有在真正需要的时候才更新并且永远保持是最新的
核心概念:
1.@observable: 可观察者(Observable state(可观察的状态))
2.@observer:标记组件,可以把你的(无状态函数)组件变成响应式组件
3.@computed: 相关数据(可观察者)发生变化时自动更新的值
黄金法则: 如果你想创建一个基于当前状态的值时,请使用 computed
。
4.@action:是任一一段可以改变状态的代码
如果是在严格模式下使用 MobX的话,MobX 会强制只有在动作之中才可以修改状态。
实用工具:
1.provider:传递 store 给子组件
2.inject:挑选 store 作为 prop 传递给目标组件(注入)
3.tojs:把 observable 数据结构转换成普通的 javascript 对象并忽略计算值
现认识到的:
when(表达式,表达式为true时执行的回调函数)
autorun:
原则
MobX 支持单向数据流,也就是动作改变状态,而状态的改变会更新所有受影响的视图。
当状态改变时,所有衍生都会进行原子级的自动更新。因此永远不可能观察到中间值。
所有衍生默认都是同步更新。这意味着例如动作可以在改变状态之后直接可以安全地检查计算值。
计算值 是延迟更新的。任何不在使用状态的计算值将不会更新,直到需要它进行副作用(I / O)操作时。 如果视图不再使用,那么它会自动被垃圾回收。
所有的计算值都应该是纯净的。它们不应该用来改变状态。