MobX：新手入门指南

2024-01-09 05:40:01

在构建复杂的 JavaScript 和 React 应用时，状态管理是一个常见且棘手的挑战。MobX 是一个简单易用的状态管理库，专为解决这一挑战而设计。它使用反应式编程范式，使您可以轻松地跟踪和管理应用程序的状态。这篇文章将介绍 MobX 的基本概念和使用方法，并提供一个简单的 TodoList 示例来帮助您快速上手。

MobX 简介

MobX 是一个基于响应式编程范式的状态管理库。这意味着它允许您定义可观察的状态，并在这些状态发生变化时自动更新您的应用程序 UI。这种机制消除了手动更新 UI 的需要，简化了应用程序开发过程。

MobX 的核心概念是“可观察状态”。可观察状态是可以在应用程序中轻松跟踪和管理的状态。您可以使用 MobX 的内置 API 轻松地创建和管理可观察状态。当可观察状态发生变化时，MobX 会自动更新所有受此状态影响的组件。

MobX 的基本用法

以下是如何在您的 JavaScript 或 React 应用中使用 MobX 的基本步骤：

安装 MobX 库。您可以使用 npm 或 yarn 安装 MobX：

npm install mobx

创建一个可观察状态。您可以使用 MobX 的 observable 函数来创建可观察状态。例如，以下代码创建了一个名为 todos 的可观察数组：

import { observable } from 'mobx';

const todos = observable([
  { id: 1, title: 'Learn MobX', completed: false },
  { id: 2, title: 'Build a TodoList app', completed: false },
  { id: 3, title: 'Publish a blog post about MobX', completed: false },
]);

使用可观察状态。您可以使用 MobX 的内置 API 来访问和更新可观察状态。例如，以下代码使用 todos 数组中的第一个待办事项的 title 属性：

const firstTodoTitle = todos[0].title;

您还可以使用 todos 数组的 push 方法来向数组中添加新的待办事项：

todos.push({ id: 4, title: 'Learn React', completed: false });

渲染可观察状态。您可以使用 MobX 的 observer 函数来渲染可观察状态。例如，以下代码使用 todos 数组来渲染一个简单的 TodoList：

import { observer } from 'mobx';

const TodoList = observer(() => (
  <ul>
    {todos.map((todo) => (
      <li key={todo.id}>
        <input type="checkbox" checked={todo.completed} onChange={() => { todo.completed = !todo.completed; }} />
        <span>{todo.title}</span>
      </li>
    ))}
  </ul>
));

MobX TodoList 示例

以下是一个简单的 MobX TodoList 示例：

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

class TodoStore {
  @observable todos = [];

  @action addTodo(title) {
    this.todos.push({ id: Date.now(), title, completed: false });
  }

  @action toggleTodo(todo) {
    todo.completed = !todo.completed;
  }

  @action removeTodo(todo) {
    this.todos = this.todos.filter((t) => t !== todo);
  }
}

const store = new TodoStore();

const TodoList = observer(() => (
  <ul>
    {store.todos.map((todo) => (
      <li key={todo.id}>
        <input type="checkbox" checked={todo.completed} onChange={() => store.toggleTodo(todo)} />
        <span>{todo.title}</span>
        <button onClick={() => store.removeTodo(todo)}>X</button>
      </li>
    ))}
  </ul>
));

const AddTodoForm = observer(() => (
  <form onSubmit={(e) => {
    e.preventDefault();
    const title = e.target.querySelector('input[name="title"]').value;
    store.addTodo(title);
  }}>
    <input type="text" name="title" placeholder="Enter a new todo..." />
    <button type="submit">Add</button>
  </form>
));

const App = () => (
  <div>
    <h1>MobX TodoList</h1>
    <AddTodoForm />
    <TodoList />
  </div>
);

export default App;