mobx
mobx是比redux更轻量的一个库,个人理解而已,他比redux少了中间一层reduce,是直接action然后修改数据,更新视图。
1
第一种,通过decorate,这里需要引入两个api,分别是,还有一个decorate
定义一个类,通过decorate将该类的a监听起来,若想修改数据,必须通过action来修改数据,才是达到响应式更新。
使用的时候,需要引入
通过这个将我们的组件包裹起来
然后通过高阶组件将store的值传入组件内部,接着就可以在内部使用了。
修改数据必须调用类里面的add方法,通过action去修改,这样UI上显示的a才会改变。不过这种方法不知道是不是没用了,就是decorate这个接口一直报mobx里面没有decorate这个api,但是官网上还有说明,就在这里提一下。
2
通过修饰器@
这个需要配置东西,也不难,在你的文件的package.json找到babel然后修改即可。重启项目就支持了。
使用方法,这个稍比第一种方法简单,
引入两个接口,不需要使用decorate了,直接在类里面通过@observable来将该数据监听起来,修改数据同样通过action来修改。
使用方法也一样,也需要通过observer将组件监听起来
效果如图,点击一下就改变数据
3
第三种也是我在网上看到的,直接通过observable将数据监听器来
通过observable将数据监听,通过action来修改数据,最后通过observer来监听组件。效果如图
注意,也可以不通过action,通过onClick等事件直接修改类里面的数据时,也是会达到响应式更新,但是不推荐。
4 自从mobx6出了一个更好用的API,即 makeAutoObservable
说这个api前,先说说makeObservable,这个API使用方法为
makeObservable(target, annotations?, options?)
第一个参数为需要代理的对象,第二个参数为对各个属性进行包装,表明其作用。
例子
const a = makeObservable(
{b:2,add(){this.b+2}},
{a:observable,add:action}
)
这里表明a是监听的数据,add是一个action.
这样写好像不必装饰器写法容易,那么接下来就是主角makeAutoObservable登场了,
makeAutoObservable(target, overrides?, options?)
第一个参数为需要代理的对象,第二个参数为注释,表明哪些参数不需要推断。
const a = makeAutoObservable(
{b:2,add(){this.b+2}}
)
这个API得强大之处就是会自动推断,比如b被推断为observable,add被推断为action。
推理规则:
包含function值的任何(继承的)成员都将用注释autoAction。
任何get三元都将带有computed注释。
其他任何自己的字段都将标记为observable。
任何(继承的)作为生成器函数的成员都将带有注释flow。(请注意,在某些编译器配置中无法检测到生成器功能,如果流无法按预期运行,请确保flow明确指定。)
overrides参数中被标为false的成员将不会被注释。例如,将其用于只读字段(例如标识符)。
限制
makeAutoObervable不能用于具有super()或者subclassed的类
可以将makeObservable,makeAutoObservable与observable的使用方法做对比,
类的使用方式:
直接在构造函数里面,将整个this作为代理的对象。而makeObservable只需要写上第二个参数,表示属性和方法的类型即可。