mobx mobx-state-tree 使用总结

背景

• mobx：简单、可扩展的状态管理。相当于 redux。
• mobx-state-tree：MobX 是一个状态管理“引擎”，MobX-State-Tree 为其提供了应用程序所需的结构和常用工具。
• mobx-react：使用 React 组件包装器打包以将 React 与 MobX 相结合。导出 observer 装饰器和其他 utils。
• mobx-react-lite：这是mobx-react的轻量级版本，它仅支持 React功能组件，因此使库稍微更快更小

MobX 是最受欢迎的 Redux 替代品之一

mobx-state-tree

model：定义数据类型
props：基于当前类型生成一种新类型，并添加/覆盖指定的属性
action：动作
self：代表 model 的实例
snapshot：快照，可以监测数据变化
views：里面的 get，相当于 vue 的计算属性view就是是视图的意思，计算属性应该写在视图里，没啥毛病
extend：扩展

.model('name', {})
// 同
.model('name')
.props({})

mobx-state-tree踩坑

报错 Error: [mobx-state-tree] expected mobx-state-tree type as argument 1, got undefined instead

export * from './statistics-store/statistics-store';
export * from './summary-week/summary-week';

导出顺序不对，调换位置

或者还有一些奇奇怪怪的报错，都是因为没有写 types.optional()

坑：我直接在函数组件里写了一些操作列表的逻辑，而这些逻辑应该是写在 useEffect 里的，导致我页面列表加载完闪动消失

mobx状态不更新问题

只检测属性，所以需要遍历属性
数组

data
// 改为
data.map((item) => ({ ...item }))

对象

// 应该有更简的写法
{Object.keys(totalSummary).map((item) => {
  return (
    <Text key={item} style={{ display: 'none' }}>
      {totalSummary[item]}
    </Text>
  );
})}

提示：数据不更新可以借鉴vue的更新数据方法

https://juejin.cn/post/6844903772972384263

[](https://zhuanlan.zhihu.com/p/274561966)Mobx State Tree (MST) 踩坑记录