参考资料
- Mobx官网
- Mobx官网中文文档
- MobX入坑指南(1)
- MobX入坑指南(2) – action
- MobX入坑指南(3) – Observable Types
- MobX入坑指南(4) – Utility functions
- 高性能 MobX 模式（part 2）- 响应变化
- 高性能 MobX 模式（part 3）- 用例教程
- Mobx使用详解 - Github中有例子
- 使用mobx开发高性能react应用
- React结合TypeScript和Mobx初体验 - Github中有例子
总结
Mobx严格模式
- mobx@3.x：
useStrict(boolean) - mobx@4.x：
configure({ enforceActions: boolean }) mobx@5.x：
configure({ enforceActions: value })1
2
3
4
5可接收的值为：
"never" (默认): 可以在任意地方修改状态
"observed": 在某处观察到的所有状态都需要通过动作进行更改。在正式应用中推荐此严格模式。
"always": 状态始终需要通过动作来更新(实际上还包括创建)。
文档地址: https://cn.mobx.js.org/refguide/api.html#enforceactions
Redux和Mobx混用
index.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13import { ProviderReactRedux } from 'react-redux';
import { ProviderMobxReact } from 'mobx-react';
...
...
ReactDOM.render(
<ProviderReactRedux store={storeRedux}>
<ProviderMobxReact store={...storeMobx}>
...
</ProviderMobxReact>
</ProviderReactRedux>,
document.getElementById('root')
);
性能问题
- 尽量不要把数据处理逻辑相关的函数写到组件中, 而应该写到
store中 - 数据处理逻辑相关函数在store中要添加
@action, 不要吝啬@action的使用 @observer的属性尽量添加对应的setters, 如下:1
2
3
4
5
6
7
8
9
10
11
12
13
14@observer
_name = ''
@computed
get name() {
return this._name;
}
// set不用添加@action装饰器
// https://mobx.js.org/refguide/action.html
// https://github.com/mobxjs/mobx/blob/gh-pages/docs/refguide/computed-decorator.md#setters-for-computed-values
set name(value) {
return this._name = value;
}