React 中 MobX 的使用指南：轻松入门！

2024-01-17 11:44:46

MobX 是一个流行的 JavaScript 状态管理库，它使用响应式编程范式，可以轻松地管理复杂的状态。MobX 与 React 集成非常简单，并且可以带来许多好处，例如：

改进代码的可测试性
增强代码的可维护性
提高应用程序的性能

如果您正在寻找一种简单而强大的方式来管理 React 中的状态，那么 MobX 是一个不错的选择。

MobX 在 React 中的使用指南

1. 安装 MobX

在您的项目中安装 MobX：

npm install mobx

2. 创建一个 MobX 存储

创建一个 MobX 存储，它将保存您的应用程序状态。

import { observable, action } from "mobx";

class TodoStore {
  @observable todos = [];

  @action
  addTodo(todo) {
    this.todos.push(todo);
  }
}

const store = new TodoStore();

3. 将 MobX 存储连接到 React 组件

将 MobX 存储连接到您的 React 组件，以便您可以访问和更新存储中的数据。

import { observer } from "mobx-react";

@observer
class TodoList extends React.Component {
  render() {
    const { store } = this.props;

    return (
      <ul>
        {store.todos.map((todo) => (
          <li key={todo}>{todo}</li>
        ))}
      </ul>
    );
  }
}

4. 使用 MobX 存储

现在您就可以在 React 组件中使用 MobX 存储了。

const store = new TodoStore();

store.addTodo("Learn MobX");
store.addTodo("Build a React app");
store.addTodo("Deploy the app");

ReactDOM.render(<TodoList store={store} />, document.getElementById("root"));