react mobx 用法_react引入mobx-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_37931969/article/details/134532986

本文介绍了如何在React项目中使用mobx进行状态管理和数据存储，包括安装、创建store、创建context、使用hooks以及注意事项。重点在于如何通过mobx实现组件间的数据共享和性能优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. 安装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传递的值无法进行监听。
目前我采用的方法是最后一层优化的组件通过数据传递的方式进行。（如有优化的方式欢迎评论告知,万分感谢！！！）