MobX：现代 React 应用状态管理的理想之选

2023-11-16 10:39:54

前言

React 是一个优秀的 JavaScript 库，它可以帮助您构建现代化的用户界面。但是，React 本身并不提供状态管理功能，因此您需要选择一个状态管理库来帮助您管理应用中的状态。

MobX 是一个简洁而又强大的状态管理库，它可以帮助您在编写 React 应用时更加轻松自如。MobX 的核心思想是将状态视为一个可观察的对象，当状态发生变化时，MobX 会自动更新所有依赖于该状态的组件。这使得您无需手动更新组件的状态，从而简化了您的代码。

MobX 的基本概念

MobX 的核心概念包括：

可观察对象： 可观察对象是 MobX 的基本构建块。可观察对象可以是任何 JavaScript 对象，只要它被标记为可观察对象。可观察对象的状态发生变化时，MobX 会自动更新所有依赖于该状态的组件。
动作： 动作是 MobX 中用于改变可观察对象状态的函数。动作必须被标记为动作，才能被 MobX 追踪。当一个动作被调用时，MobX 会自动更新所有依赖于该动作的组件。
计算值： 计算值是 MobX 中用于从可观察对象计算派生值的对象。计算值依赖于可观察对象，当可观察对象的状态发生变化时，计算值也会自动更新。

MobX 的使用方法

要使用 MobX，您需要先安装 MobX 库。您可以通过以下命令安装 MobX：

npm install mobx

安装 MobX 后，您就可以开始使用它来管理您的 React 应用中的状态了。

1. 创建可观察对象

要创建可观察对象，您可以使用 observable 函数。例如：

const todoList = observable({
  todos: [],
  completedTodos: 0
});

这个可观察对象包含两个属性：todos 和 completedTodos。todos 属性是一个数组，它存储待办事项。completedTodos 属性是一个数字，它存储已完成待办事项的数量。

2. 创建动作

要创建动作，您可以使用 action 函数。例如：

const addTodo = action((todo) => {
  todoList.todos.push(todo);
});

这个动作将一个待办事项添加到 todoList 中。

3. 创建计算值

要创建计算值，您可以使用 computed 函数。例如：

const remainingTodos = computed(() => {
  return todoList.todos.length - todoList.completedTodos;
});

这个计算值计算出剩余待办事项的数量。

4. 使用 MobX 来构建 React 应用

您可以使用 MobX 来构建一个简单的 React 应用。例如，您可以使用以下代码构建一个待办事项列表应用：

import React, { Component } from 'react';
import { observable, action, computed } from 'mobx';
import { observer } from 'mobx-react';

const todoList = observable({
  todos: [],
  completedTodos: 0
});

const addTodo = action((todo) => {
  todoList.todos.push(todo);
});

const remainingTodos = computed(() => {
  return todoList.todos.length - todoList.completedTodos;
});

@observer
class App extends Component {
  render() {
    return (
      <div>
        <h1>待办事项列表</h1>
        <ul>
          {todoList.todos.map((todo) => <li key={todo}>{todo}</li>)}
        </ul>
        <button onClick={() => addTodo('新待办事项')}>添加待办事项</button>
        <p>剩余待办事项：{remainingTodos}</p>
      </div>
    );
  }
}

export default App;