React中使用Mobx笔记

参考资料

总结

Mobx严格模式

  • mobx@3.xuseStrict(boolean)
  • mobx@4.xconfigure({ enforceActions: boolean })
  • mobx@5.xconfigure({ 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
    13
    import { ProviderReactRedux } from 'react-redux';
    import { ProviderMobxReact } from 'mobx-react';
    ...

    ...
    ReactDOM.render(
    <ProviderReactRedux store={storeRedux}>
    <ProviderMobxReact store={...storeMobx}>
    ...
    </ProviderMobxReact>
    </ProviderReactRedux>,
    document.getElementById('root')
    );

性能问题

  1. 尽量不要把数据处理逻辑相关的函数写到组件中, 而应该写到store
  2. 数据处理逻辑相关函数在store中要添加@action, 不要吝啬@action的使用
  3. @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;
    }
显示 Gitment 评论