掌握 MobX：React 的简化反应式状态管理

MobX：一个简单且可扩展的 React 状态管理解决方案

MobX 是一个流行的 JavaScript 应用程序状态管理库，尤其是在 React 中。与依赖集中存储和显式操作调度的 Redux 不同，MobX 采用更具反应性的方法来管理状态。它通过跟踪依赖关系并在状态更改时仅重新渲染应用程序的必要部分来自动更新应用程序的状态和 UI。

在本指南中，我们将介绍 MobX 的关键概念、如何使用 React 设置它，以及如何在 React 应用程序中有效地使用它进行状态管理。

---

1.什么是 MobX？

MobX 是一个状态管理库，它利用反应式编程来管理应用程序的状态。它会自动跟踪和更新 UI 中依赖于状态的部分，使其成为管理应用程序数据的非常高效且直观的方式。

MobX 的主要特性：

• 自动依赖跟踪：MobX 自动跟踪应用程序的哪些部分依赖于哪些状态。
• 简单直观：使用 MobX，您不需要手动调度操作或更新状态。 MobX 自动对状态变化做出反应。
• 声明式：MobX 使用可观察的方法，您可以将状态定义为 observable，当状态发生变化时，您的组件会自动重新渲染。
• 性能优化：MobX 仅更新依赖于更改状态的组件，从而实现高度优化的性能。

---

2. MobX 的核心概念

MobX 围绕几个共同管理状态的核心概念构建：

1.可观察状态

可观察状态是 MobX 的核心。当一个对象被标记为 observable 时，MobX 会跟踪该对象的状态并自动更新依赖于它的组件。

示例：

import { observable } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value++;
  },
  decrement() {
    this.value--;
  },
});

• 可观察装饰器使计数器对象具有反应性。每当值发生变化时，任何使用此状态的 React 组件都会自动重新渲染。

2.行动

MobX 中的操作是修改状态的函数。按照惯例，应该使用操作来更新可观察的状态，因为 MobX 确保状态以受控和可预测的方式更新。

示例：

import { observable } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value++;
  },
  decrement() {
    this.value--;
  },
});

• 增量和减量方法是使用动作装饰器定义的动作。这些方法修改状态。

3.计算值

计算值源自可观察状态。当可观察状态发生变化时，计算值会自动重新计算，确保应用程序的状态保持一致。

示例：

import { action } from 'mobx';

const counter = observable({
  value: 0,
  increment: action(function () {
    this.value++;
  }),
  decrement: action(function () {
    this.value--;
  }),
});

• doubleValue 是从可观察值派生的计算值。每当值发生变化时，都会重新计算 doubleValue。

4.反应

反应是每当可观察值发生变化时就会发生的副作用。反应对于根据状态变化触发操作非常有用。

示例：

import { computed } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value++;
  },
  decrement() {
    this.value--;
  },
  get doubleValue() {
    return this.value * 2;
  },
});

• autorun 函数是一种在 counter.value 发生变化时自动运行的反应。它将更新的计数器值记录到控制台。

---

3.将 MobX 与 React 集成

MobX 与 React 无缝集成来管理应用程序的状态。在 React 中，MobX 通过使用 observer 高阶组件来跟踪状态变化并在必要时自动更新 UI。

第 1 步：安装 MobX 和 React-MobX

要在 React 应用程序中使用 MobX，您需要安装 mobx 和 mobx-react：

import { autorun } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value++;
  },
  decrement() {
    this.value--;
  },
});

autorun(() => {
  console.log(`Counter value is: ${counter.value}`);
});

第 2 步：创建一个 Observable Store

创建一个保存应用程序状态的存储。该存储将是可观察的，并且组件可以对其更改做出反应。

示例：

npm install mobx mobx-react

• CounterStore 类定义可观察的状态（值）和操作（递增和递减）。

第3步：制作React组件观察者

要将 React 组件连接到 MobX，您需要使用 mobx-react 中的观察者高阶组件。这将允许您的组件在可观察状态发生变化时自动重新渲染。

示例：

import { observable, action } from 'mobx';

class CounterStore {
  @observable value = 0;

  @action increment() {
    this.value++;
  }

  @action decrement() {
    this.value--;
  }
}

export const counterStore = new CounterStore();

• Counter 组件用观察者包装，这使得它能够对 counterStore 中的更改做出反应。当 counterStore.value 发生变化时，React 会自动重新渲染组件以反映新值。

第 4 步：在您的应用程序中使用商店

现在您的商店已设置完毕并且您的组件已被观察者包装，您可以在应用程序中使用该商店：

import { observable } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value++;
  },
  decrement() {
    this.value--;
  },
});

• Provider 用于将存储注入到应用程序中。 Counter 组件现在可以直接访问 counterStore。

---

4.使用 MobX 的优点

1.简单

MobX 可以轻松管理状态，减少 Redux 等其他状态管理库中常见的样板文件和复杂性。

2.自动重新渲染

当状态发生变化时，MobX 会自动处理依赖于该状态的组件的重新渲染。

3.细粒度可观察性

MobX 确保状态更改时仅重新渲染必要的组件，从而提高性能。

4.声明式状态管理

使用 MobX，状态是通过声明方式管理的。您只需要定义状态的行为方式，MobX 就会处理其余的事情。

---

5.结论

MobX 是一个强大且高效的状态管理库，它使用反应式编程原理。凭借其简单的设置和自动状态跟踪，它使 React 应用程序中的状态管理变得更加容易。 MobX 对于需要对更新和性能优化进行细粒度控制的应用程序特别有用。

如果您正在构建复杂的 React 应用程序并想要一个易于理解的状态管理解决方案，MobX 是一个绝佳的选择。它直观、强大，并与 React 无缝协作，提供优化的开发体验。

---

以上是掌握 MobX：React 的简化反应式状态管理的详细内容。更多信息请关注PHP中文网其他相关文章！