在React里面使用mobx状态管理详细步骤

1、安装MobX和MobX React：

在你的项目目录下运行以下命令安装MobX和MobX React：

npm install mobx mobx-react

2、创建MobX Store：

创建一个用于管理状态的MobX Store。这个Store应该包含你希望全局管理的状态和相关的操作。以下是一个简单的示例：

// store.js
import { makeAutoObservable } from 'mobx';class AppStore {counter = 0;constructor() {makeAutoObservable(this);}increment() {this.counter += 1;}decrement() {this.counter -= 1;}
}const appStore = new AppStore();
export default appStore;export const useStore = () => appStore;

3、使用MobX Provider：

在你的应用中，使用MobxProvider包裹整个应用，同时将创建的MobX Store传递给Provider：

import React from 'react';
import { Provider } from 'mobx-react';
import App from './App';
import store from './mobxStore/store';
import { createRoot } from 'react-dom/client';// 使用 ReactDOM.createRoot 创建 React 根节点
const root = createRoot(document.getElementById('root'));// 在根节点上渲染应用
root.render(<React.StrictMode>{/* 使用 MobxProvider 包裹整个应用，并传递 MobX Store */}<Provider store={store}><App /></Provider></React.StrictMode>
);

4、获取 MobX Store

在你的React组件中使用MobX状态和操作。你可以使用MobX提供的useStore hook或者@inject注解。

// App.js
import React from 'react';
import { useObserver } from 'mobx-react';
import { useStore } from './mobxStore';const App = () => {const store = useStore();return useObserver(() => (<div><h1>Counter: {store.counter}</h1><button onClick={() => store.increment()}>Increment</button><button onClick={() => store.decrement()}>Decrement</button></div>));
};export default App;

// mobxStore.js
import { createContext, useContext } from 'react';class AppStore {// ... (同上)
}const appStore = new AppStore();const MobxStoreContext = createContext();export const MobxProvider = ({ children }) => (<MobxStoreContext.Provider value={appStore}>{children}</MobxStoreContext.Provider>
);export const useStore = () => {const store = useContext(MobxStoreContext);if (!store) {throw new Error('useStore must be used within a MobxProvider');}return store;
};export default appStore;

5、@inject注解。是什么

在MobX中，@inject是一个装饰器（Decorator），它用于将数据注入到React组件中。该装饰器的作用是将指定的mobx store（或者stores）中的数据注入到组件的props中，以便在组件中直接访问mobx的状态和操作。

在使用@inject装饰器之前，你需要确保你的项目支持装饰器语法。如果你使用的是Create React App等工具，它们可能需要额外的配置。在许多现代React应用中，支持装饰器语法已经默认启用。

以下是一个简单的例子，演示了如何使用@inject：

// mobxStore.js
import { observable, action } from 'mobx';class CounterStore {@observable count = 0;@action increment() {this.count += 1;}@action decrement() {this.count -= 1;}
}const counterStore = new CounterStore();
export default counterStore;

// App.js
import React from 'react';
import { observer, inject } from 'mobx-react';// 使用 @inject 注入 counterStore
@inject('counterStore')
@observer
class App extends React.Component {render() {const { counterStore } = this.props;return (<div><h1>Counter: {counterStore.count}</h1><button onClick={() => counterStore.increment()}>Increment</button><button onClick={() => counterStore.decrement()}>Decrement</button></div>);}
}export default App;

在这个例子中，@inject('counterStore')注入了一个名为counterStore的mobx store到App组件的props中。然后，@observer装饰器使得组件能够观察mobx状态的变化，实时更新UI。

请注意，@inject的参数是要注入的mobx stores的名称。在上述例子中，counterStore是一个实例，但你可以有多个不同的stores，然后在@inject中指定需要的stores名称。

在使用装饰器语法的同时，确保你的项目配置支持装饰器。在Create React App中，你可能需要使用react-app-rewired等工具来进行额外的配置。