vanex
Vanex 是基于 mobx 的 React 数据流管理框架,旨在借助 mobx 提供的基础能力,帮助用户组织更大规模的 React 项目。
文档
https://alibaba.github.io/vanex/
Quick Start
Vanex 提供两个简洁的 API:@vanex 和 start
;;; const model = name: 'my' // 数据部分 data: name: 'abc' // 异步请求部分 effects: async { try const res = await axios; ifressuccess && resdata // set方法会自动触发UI渲染 this; catche ; } ; @Component { super...arguments; } { // 异步请求数据 thismy; } { const name = thismy; return <div> name </div> ; } ;
See more: https://alibaba.github.io/vanex/quick-start.html
说明
mobx是基于Object.defineProperties()
(无法监听新增属性)实现的,所以会导致:如果在model的data里没有预先设置某项值,后面对该值做改动的时候就不会触发UI的重新渲染,解决方案:调用React刷新UI的API,手动触发UI更新:this.foreceUpdate()
;- ES7 decorator语法的编译需要babel插件支持:babel-plugin-transform-decorators-legacy;
- mobx会对我们存储的数据做一层包装,以实现对
get/set
的订阅,所以我们在控制台打印某个数据的时候,会打印出被包装了的对象,这时,我们可以调用toJS()
方法来获取原来未被包装的数据,比如我们想获取名为home的model的account对象:{name: 'home', data: {account: {id: 1}}}
,则可以执行:const { account } = this.home.toJS();
或者const { account } = this.props.home.toJS()
,会正常输出:{id: 1}
。
TODO
- 修复
autorun
里执行effects里的方法会导致死循环的问题;