MobX与其他状态管理工具

MobX 是一种简单而强大的状态管理库，特别适用于 React 应用的状态管理。它通过可观察（observable）的数据和响应式编程思想，简化了应用中的状态管理。MobX 以其简洁的 API 和自动化的数据跟踪特性而著称，非常适合需要高效数据流的应用。

在本章中，我们将对比 MobX 与其他常用的状态管理工具，如 Redux 和 React Context，帮助你更好地理解 MobX 的优势与不足，并帮助你选择适合的状态管理方案。

1. MobX 简介

MobX 采用的是响应式编程模型，状态被“观察”（observable），并且一旦状态改变，任何依赖于这个状态的计算和 UI 组件都会自动更新。这种方式避免了冗长的状态更新和管理代码，极大地简化了开发流程。

1.1 MobX 的核心概念

Observable State（可观察的状态）：在 MobX 中，任何 JavaScript 对象都可以被标记为“可观察”的，表示它们的状态是可以被 MobX 监控的。
Computed Values（计算值）：计算值是依赖于 observable 数据的值，MobX 会自动计算这些值并缓存，直到它们的依赖项发生变化。
Reactions（反应）：反应是当数据发生变化时执行的动作，例如自动更新视图。
Actions（动作）：动作是用于改变可观察状态的函数，通常用来封装状态更新的逻辑。

1.2 安装 MobX

npm install mobx mobx-react

2. 使用 MobX 管理状态

2.1 创建 Observable 状态

使用 makeObservable 或 observable 函数将状态标记为可观察。

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

class Counter {
  value = 0;

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

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

const counter = new Counter();
export default counter;

在上面的例子中，value 被标记为可观察的，increment 被标记为动作，用于修改 value 的值。

2.2 观察状态变化

通过 observer 包裹组件，MobX 会自动检测并响应数据的变化。

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

const CounterComponent = observer(() => (
  <div>
    <h1>{counter.value}</h1>
    <button onClick={() => counter.increment()}>Increment</button>
  </div>
));

export default CounterComponent;

observer 高阶组件会使得组件自动监听 MobX store 中的数据变化，并且在数据发生变化时，自动重新渲染组件。

3. MobX 与 Redux 对比

虽然 Redux 和 MobX 都用于管理应用状态，但它们有着明显的差异。我们来对比它们的特点，帮助你选择最适合的状态管理工具。

3.1 数据流

Redux：使用“单向数据流”。状态存储在一个全局的 store 中，组件通过 dispatch 动作来修改状态，然后通过 connect 或 useSelector 获取最新状态。
MobX：使用“响应式数据流”。状态被标记为可观察的，当状态发生变化时，依赖于该状态的组件会自动重新渲染。

3.2 API 复杂度

Redux：需要通过 actions、reducers 和 dispatch 来管理状态。对于较复杂的应用，可能会需要配置中间件（如 Redux Thunk 或 Redux Saga）。
MobX：通过 observable、computed 和 action 提供简单的 API，代码量较少，开发更加简洁。