mobx

简单、可扩展的状态管理

安装

npm install mobx --save
React绑定库:
npm install mobx-react --save

入门

mobx的优势:任何源自应用状态的东西都应该自动地获得。MobX 提供了优化应用状态与 React 组件同步的机制,这种机制就是使用响应式虚拟依赖状态图表,它只有在真正需要的时候才更新并且永远保持是最新的。


flow.png

核心概念

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(动作)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. 介绍 1.1. 原理 React的render是 状态 转化为树状结构的渲染组件的方法而MobX提供了一种存...
    三月懒驴阅读 14,374评论 1 28
  • Mobx解决的问题 传统React使用的数据管理库为Redux。Redux要解决的问题是统一数据流,数据流完全可控...
    前端大神888阅读 3,244评论 1 0
  • MobX 简单、可扩展的状态管理(可观察的数据) 使用: 安装: npm install mobx --save。...
    jevons_lee_阅读 3,954评论 0 1
  • Mobx 安装 安装:npm install mobx --save。 React 绑定库: npm instal...
    淡退阅读 4,001评论 0 0
  • 广东的小伙伴一定都懂的一个梗就是:不舒服啊,肯定是上火啦,叫你别吃xxx你不信。在我家也是这样,甜食不能多吃,辣的...
    小路灯阅读 3,025评论 0 1