在 React 中使用 MobX 实现状态管理-网页技术-CodeUp Hub

简介

在现代前端开发中，状态管理是构建复杂应用时不可或缺的一部分。React 本身是一个声明式的视图层库，并不直接提供状态管理的解决方案。幸运的是，有多种第三方库可以帮助我们管理状态，其中 MobX 是一个非常流行的选择。它提供了一种简洁、透明且高效的响应式状态管理方式。本文将通过一个简单的待办事项（Todo）应用示例，介绍如何在 React 中使用 MobX 来管理状态。

安装依赖

在开始之前，确保你的开发环境已经安装了 Node.js 和 npm/yarn。然后，创建一个新的 React 应用，并安装 MobX 及其 React 绑定：

npx create-react-app mobx-todo-app
cd mobx-todo-app
npm install mobx mobx-react

创建 MobX Store

MobX 使用“stores”来存储和管理应用的状态。我们将创建一个简单的 TodoStore 来管理待办事项。

在项目根目录下创建一个名为 store.js 的文件。
定义 TodoStore 类，并使用 makeAutoObservable 函数使其属性和方法自动响应状态变化。

// store.js
import { makeAutoObservable } from "mobx";

class TodoStore {
  todos = [];

  constructor() {
    makeAutoObservable(this);
  }

  addTodo(text) {
    this.todos.push({ text, completed: false });
  }

  toggleTodo(index) {
    const todo = this.todos[index];
    todo.completed = !todo.completed;
  }
}

const store = new TodoStore();
export default store;

创建 React 组件

接下来，我们将创建一个 React 组件 TodoApp.js，它将使用我们的 TodoStore 来管理待办事项的状态。

在 src 目录下创建 TodoApp.js 文件。
使用 useState 钩子来管理输入框的状态。
通过调用 TodoStore 中的方法来添加和切换待办事项的状态。

// TodoApp.js
import React, { useState } from 'react';
import store from './store';

function TodoApp() {
  const [input, setInput] = useState('');

  const handleAddTodo = () => {
    store.addTodo(input);
    setInput('');
  };

  return (
    <div>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <button onClick={handleAddTodo}>Add Todo</button>
      <ul>
        {store.todos.map((todo, index) => (
          <li key={index} style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
            {todo.text}
            <button onClick={() => store.toggleTodo(index)}>Toggle</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

使用 Provider 包裹应用

为了确保 TodoStore 在整个应用中是可访问的，我们将使用 mobx-react 的 Provider 组件来包裹我们的根组件。

在 src/index.js 文件中，使用 Provider 组件包裹 TodoApp。

javascript

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'mobx-react';
import store from './store';
import TodoApp from './TodoApp';

ReactDOM.render(
  <Provider store={store}>
    <TodoApp />
  </Provider>,
  document.getElementById('root')
);