使用 MobX 和 React Hooks 进行状态管理：类方式和函数方式

在 React 项目中使用 MobX 和 React hooks 进行状态管理，可以让你的代码更加简洁和高效。本文将详细介绍如何通过类和函数两种方式创建 MobX Store，并在 React 组件中使用。

安装 MobX 和 MobX React

首先，我们需要安装 mobx 和 mobx-react-lite：

npm install mobx mobx-react-lite

方法一：类方式创建 MobX Store

第一步：创建 MobX Store 类

在你的项目中创建一个 MobX store。假设你在 src/stores/ 目录中创建这个文件。

// src/stores/CounterStore.js
import { makeAutoObservable } from 'mobx';

class CounterStore {
  count = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}

const counterStore = new CounterStore();
export default counterStore;

第二步：在 React 组件中使用 MobX Store

在你的 React 组件中使用 MobX store，并使用 observer 函数使组件响应 MobX 状态的变化。

// src/components/Counter.js
import React from 'react';
import { observer } from 'mobx-react-lite';
import counterStore from '../stores/CounterStore';

const Counter = observer(() => {
  return (
    <div>
      <h1>Count: {counterStore.count}</h1>
      <button onClick={() => counterStore.increment()}>Increment</button>
      <button onClick={() => counterStore.decrement()}>Decrement</button>
    </div>
  );
});

export default Counter;

第三步：在应用中使用组件

// src/App.js
import React from 'react';
import Counter from './components/Counter';

function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}

export default App;

运行你的应用

确保一切设置正确后，运行你的应用：

npm start

方法二：函数方式创建 MobX Store

第一步：创建 MobX Store 函数

使用函数来创建 MobX Store，可以让代码更加简洁，并且更容易与 React hooks 集成。

// src/stores/useCounterStore.js
import { makeAutoObservable } from 'mobx';
import { useLocalObservable } from 'mobx-react-lite';

const createCounterStore = () => ({
  count: 0,
  increment() {
    this.count++;
  },
  decrement() {
    this.count--;
  }
});

const useCounterStore = () => {
  const store = useLocalObservable(createCounterStore);
  return store;
};

export default useCounterStore;

第二步：在 React 组件中使用 MobX Store

// src/components/Counter.js
import React from 'react';
import { observer } from 'mobx-react-lite';
import useCounterStore from '../stores/useCounterStore';

const Counter = observer(() => {
  const counterStore = useCounterStore();

  return (
    <div>
      <h1>Count: {counterStore.count}</h1>
      <button onClick={counterStore.increment}>Increment</button>
      <button onClick={counterStore.decrement}>Decrement</button>
    </div>
  );
});

export default Counter;

第三步：在应用中使用组件

// src/App.js
import React from 'react';
import Counter from './components/Counter';

function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}

export default App;

运行你的应用

确保一切设置正确后，运行你的应用：

npm start

总结

通过类和函数两种方式创建 MobX Store，你可以根据项目需求和个人喜好选择合适的方法。类方式适合传统的面向对象编程，而函数方式则更简洁，易于与 React hooks 集成。希望这篇文章能帮助你在 React 项目中更好地使用 MobX 进行状态管理。如果你有更多问题或需要进一步的帮助，请在评论区留言！