一. 安装mobx
- yarn add mobx
- yarn add mobx-react-lite
二. 创建一个mobx文件夹统一管理项目所有的数据
三. 在mobx文件夹里创建一个index.js 统一管理
import React, { useContext } from "react";
import DemoStore from "./DemoStore";
class RootStore {
constructor() {
this.demoStore = DemoStore;
//如果还有其他文件,依照上面引入即可
}
}
const rootStore = new RootStore()
const context = React.createContext(rootStore)
const useMobStore = () => useContext(context)
export {useMobStore};
四. 创建DemoStore.js 文件
import { makeAutoObservable, toJS } from 'mobx';
class DemoStoreData{
number: 1; // 数据
constructor() {
makeAutoObservable(this)
}
// 更新数据(此方法可以是异步的,可以在里面调完接口在更新数据)
updateNumber = (data) =>{
this.number = data;
}
}
const DemoStore = new DemoStoreData()
export default DemoStore;
五. 使用
// 导入的是 三 步骤 创建的index.js 文件
import { useMobStore } from "./mobx/index.js";
import { observer } from "mobx-react-lite";
const PageList = () => {
// 解构的是 三 步骤里的 demoStore
const { demoStore } = useMobStore();
return (
<div>
{demoStore.number}
</div>
)
}
export default observer(PageList);
六. 注意
如果组件想使用React.memo() 进行性能优化
在优化的那个组件不要有任何mobx相关的数据和方法
因为memo函数里的旧值和新值,只能监听到通过redux 或者 组件传递的值,mobx传递的值无法进行监听。
目前我采用的方法是 最后一层优化的组件 通过数据传递的方式进行。(如有优化的方式欢迎评论告知,万分感谢!!!)