在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等工具来进行额外的配置。