MobX状态管理库教程

MobX 是一个强大的状态管理库，特别适用于 React 应用。它通过自动追踪状态依赖并在状态变化时自动更新视图，使得状态管理变得更加简单和高效。本文将介绍 MobX 和 React 的基本使用方法，帮助你快速入门。

1. 安装 MobX 和 MobX-React

首先，你需要在项目中安装 MobX 和 MobX-React。

npm install mobx mobx-react

2. 创建一个简单的 MobX Store

一个 MobX Store 是一个包含应用状态和操作的类。我们可以使用 @observable 装饰器来声明可观察的状态，使用 @action 装饰器来声明修改状态的方法。

import { observable, action, makeObservable } from 'mobx';

class CounterStore {
  count = 0;

  constructor() {
    makeObservable(this, {
      count: observable,
      increment: action,
      decrement: action
    });
  }

  increment() {
    this.count += 1;
  }

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

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

3. 创建一个 React 组件并使用 MobX Store

接下来，我们创建一个 React 组件，并使用 @observer 装饰器将其转换为观察者组件，这样当状态改变时，组件会自动重新渲染。

import React from 'react';
import { observer } from 'mobx-react';
import counterStore from './CounterStore';

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

export default Counter;

4. 在应用中使用 Counter 组件

最后，我们在应用的主组件中使用 Counter 组件。

import React from 'react';
import ReactDOM from 'react-dom';
import Counter from './Counter';

const App = () => (
  <div>
    <h1>MobX React Counter</h1>
    <Counter />
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'));

5. 使用 @computed 优化衍生状态

@computed 装饰器用于定义衍生状态，它只会在依赖的状态变化时重新计算。这不仅减少了不必要的计算，还能提高应用的性能。

import { observable, computed, action, makeObservable } from 'mobx';

class CounterStore {
  count = 0;

  constructor() {
    makeObservable(this, {
      count: observable,
      doubleCount: computed,
      increment: action,
      decrement: action
    });
  }

  get doubleCount() {
    return this.count * 2;
  }

  increment() {
    this.count += 1;
  }

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

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

在 React 组件中使用 doubleCount：

import React from 'react';
import { observer } from 'mobx-react';
import counterStore from './CounterStore';

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

export default Counter;

6. 使用 Provider 和 useStore 进行依赖注入

在大型应用中，你可能会有多个 Store。可以使用 Provider 和 useStore 进行依赖注入，使得 Store 的使用更加方便。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'mobx-react';
import Counter from './Counter';
import counterStore from './CounterStore';

const stores = {
  counterStore
};

const App = () => (
  <Provider {...stores}>
    <div>
      <h1>MobX React Counter</h1>
      <Counter />
    </div>
  </Provider>
);

ReactDOM.render(<App />, document.getElementById('root'));

在 Counter 组件中使用 useStore：

import React from 'react';
import { observer, useStore } from 'mobx-react';

const Counter = observer(() => {
  const { counterStore } = useStore();

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

export default Counter;

总结

本文介绍了 MobX 和 React 的基本使用方法，包括创建 MobX Store、使用 @observable 和 @action 管理状态、使用 @observer 装饰器将 React 组件转换为观察者组件，以及使用 @computed 优化衍生状态。通过这些步骤，你可以轻松在 React 应用中集成 MobX，并享受其带来的简洁和高效的状态管理体验。