用React+MobX6构建高效前端应用程序

2023-12-10 10:10:30

前言

随着前端技术的发展，状态管理成为了一个越来越重要的课题。React作为目前最受欢迎的前端框架之一，其自带的状态管理方案——useState和useReducer，虽然简单易用，但对于复杂的状态管理场景，它们往往显得力不从心。MobX6作为一款优秀的第三方状态管理库，凭借其简单易懂的API、强大的响应式系统和良好的代码可读性，成为了许多开发者的首选。

使用React+MobX6构建高效前端应用程序

一、安装

首先，我们需要安装React和MobX6库。我们可以使用以下命令：

npm install --save react mobx

二、配置package.json

在package.json文件中，我们需要添加以下配置：

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  }
}

三、定义MobX的store

接下来，我们需要定义一个MobX的store。store是用来存储应用程序状态的对象。我们可以使用以下代码来定义一个store：

import {observable, action, computed} from "mobx";

class TodoStore {
  @observable todos = [];

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

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

  @computed
  get completedTodosCount() {
    return this.todos.filter(todo => todo.completed).length;
  }
}

const store = new TodoStore();

export default store;

四、在页面中使用MobX

现在，我们可以在页面中使用MobX了。我们可以使用以下代码在页面中渲染一个待办事项列表：

import React, {useEffect, useState} from "react";
import {useObserver} from "mobx-react-lite";
import store from "./store";

const TodoList = () => {
  const [todo, setTodo] = useState("");

  useEffect(() => {
    store.addTodo(todo);
  }, [todo]);

  return (
    <div>
      <input type="text" value={todo} onChange={e => setTodo(e.target.value)} />
      <ul>
        {useObserver(() => store.todos.map(todo => <li key={todo}>{todo}</li>))}
      </ul>
    </div>
  );
};

export default TodoList;