react：状态管理mobx、mobx-state-tree、mobx-react/mobx-react-lite的使用

背景

• 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>
  );
})}

https://blog.csdn.net/smk108/article/details/89681367

参考资料

https://github.com/mobxjs/mobx
https://github.com/mobxjs/mobx-state-tree

https://github.com/mobxjs/mobx-react该仓库已经被移植到了https://github.com/mobxjs/mobx/tree/main/packages/mobx-react

https://github.com/mobxjs/mobx-react-lite该仓库已经被移植到了 https://github.com/mobxjs/mobx/tree/main/packages/mobx-react-lite
数据不更新问题https://blog.csdn.net/smk108/article/details/89681367