- 使用起来比
redux
好用多了,就凭这一点我就放弃redux
了 - redux将数据保存在单一的store中,mobx则是分散在多个store中
- react-mobx-typescript-realworld-example-app: 一个很好的example项目
安装配置
- React集成方式: 注意看里面的Tips,如果不是用的
mobx-react-lite
,很多东西就不用写了,比如Provider,observable props(不需要在组件外部包裹observer了,默认store变化的时候会自动重新渲染),并且observer自动使用的就是React.memo,不需要单独为了优化性能去useMemo
1 | npm install --save mobx |
状态定义
- 多种类型的store可以单独创建多个store,并且如果要互相调用时没问题的,mobx也支持这种嵌套调用方式
- 一个项目example:非常实用的一个例子,它其实是在action里面调用api的,我的实际项目通常会使用reqct-query,所以我还是在外部用useQuery来调用的,然后在API里直接调用action来更新状态
- 可以放在
src/stores/xxxxStore.ts
下
1 | import {observable, action, makeObservable} from 'mobx'; |