一、computed
把其他可观察数据用自己的方式组合成新的可观察数据
二、autorun
当可观察数据发生变化,自动执行对可观察数据依赖的行为,既回调
三、when
用作某条件成立才执行某逻辑的情况,是一个简单的api
四、reaction
autorun 的变种,对于如何追踪 observable 赋予了更细粒度的控制。
decorator修饰器语法
在声明阶段实现类和类成员注解的一种语法,本质是一个函数
1、mobx是什么
Simple,scalable state management 简单可扩展的状态管理
2、mobx优势
开发难度低、开发代码量少、渲染性能好
3、mobx的核心思想
状态变化引起的副作用应该被自动触发
细粒度拆分视图组件
使用专用组件处理列表
尽可能晚地解构可观察数据
todo 222
computed
observe
webpack.js
observable被当作是装饰器使用的时候,就算是原始类型值,也是使用observable装饰,他会自动判别数据类型,自动转换是用observable.box还是observable
提升渲染性能的三大法则
mobx-react已经为react组件实现了一个shouldComponentUpdate方法,不需要重新定义一个,
mobx-react 可以将react的render方法包装成autorun,这样执行action就会触发组件重渲染了
observer是一个修饰器,不是修饰类成员的,而是修饰类本身的
修饰那个真正使用了可观察数据的组件,当action执行的时候,这个组件就会重新渲染
对于没有使用可观察数据的组件,被修饰了也不会有副作用,考虑到可扩展,建议修饰所有用到的react组件
import { PropTypes } from 'mobx-react'
static propTypes = {
cache: PropTypes.observableObject
}
可观察的数组并不是一个真正的数据,用Array.isArray判断是false
runInAction可以接受一个字符串类型的参数,就像是装饰器修饰的form名一样,一般来说对于调试是比较友好的
runInAction('modify', () => {
store.string = ''
})
action.bound 将被修饰的方法的上下文强制绑定到该对象上
使用场景:将方法作为callback传给其他对象时
无论是action还是action.bound都需要绑定在预先定义的对象方法上
runInAction:
mobx提供了一种语法糖:允许随时定义一个匿名的action方法,并运行它
action可以作为普通函数或者装饰器
直接向变量赋值的操作改变可观察数据:每次的修改都会触发autorun或者reaction的运行,这种高频的触发操作是没有必要的。
比如用户对视图的一次点击操作,需要同步修改多个状态变量,但是视图的更新却只需要一次。
为了优化这个问题,引入action
使用action的收益:将多次对状态的赋值合并为一次
reaction的使用场景:在没有数据之前,我们不想也没有必要实现写缓存的逻辑,可以使用reaction来实现在数据第一次被填充之后,来实现写缓存的逻辑。
reaction的参数为两个函数:
第一个函数引用可观察数据,并返回一个值,这个值会作为第二个函数的参数
在初始化的阶段,第一个函数会被先执行一次,这样mobx就知道哪些可观察数据被引用了,并在这些数据被修改后,执行第二个函数。这样不必先执行一遍副作用,就可以建立副作用与可观察数据之间的联系。
无论是否更改可观察数据,autorun都会先执行一次,因为没有先行执行的话,就不知道哪些可观察数据被引用,就更做不到这些数据被修改时,触发autorun的逻辑了。
但是如果可以单独告知mobx,我们引用了哪些可观察数据,这些副作用的逻辑,就不会先行执行了。
使用reaction解决上述问题
mobx...
function(1)console.log(1)
computed可以将多个可观察数据组合成一个可观察数据
autorun可以自动追踪其引用的可观察数据,并在数据改变的时候重新触发
when提供了条件执行逻辑,是autorun的一种变种
reaction只能通过分离可观察数据声明,以副作用的方式对autorun作出改进
when函数
第一个参数只能根据可观察数据来计算布尔值,不能只根据普通变量;
第一个参数的函数一开始就返回真,那么第二个参数的函数就会立即执行
autorun
computed作为装饰器,computed值可以作为新的可观察数据的
autorun执行的条件是其引用的可观察数据发生了变化
computed作为普通函数检测其他数据的变化
computed中传入一个无参数的函数,需要return
observe中传入一个具有change参数的函数,change就是foo中被检测数据变化时候的新老值,这个值是obeservableValue,注意无论被检测的哪个值变化的时候,都会触发observe中的函数
观察数据变化的方式