React 与 MongoDB 中树形组件管理的最佳实践

javascript

2024-03-03 21:48:39

React 与 MongoDB 中的树型组件管理

引言

在应用程序中管理树型数据结构可能是一项复杂的任务。本文探讨了如何使用 React 来有效管理树型组件，并将其与 MongoDB 数据库集成。通过遵循分步指南和代码示例，你将了解如何构建灵活且可扩展的应用程序来处理复杂的层次结构数据。

存储树型数据

MongoDB：一种理想的选择

MongoDB 以其存储树形数据结构的强大功能而著称。它的嵌套文档模式允许你以分层方式存储数据，非常适合表示具有层次结构关系的对象。

组件同步

递归组件：保持状态同步

为了保持组件状态与后端数据同步，可以使用递归组件。这种组件将遍历树型结构，并根据数据库中存储的数据更新组件的状态。

请求优化

策略优化数据库更新

为了避免不必要的数据库更新和提高性能，可以使用以下策略：

批处理更新： 将多个更新合并到一个请求中。
条件更新： 仅在必要时更新数据库。
乐观更新： 在等待服务器确认之前，在本地更新组件状态。

代码示例

React 组件

import { useState, useEffect } from "react";

const TaskObjComp = ({ task, setTask, parentTask, setParentTask }) => {
  const [subtasks, setSubtasks] = useState([]);

  // 获取子任务
  useEffect(() => {
    fetch(`/api/subtasks/${task.id}`).then(res => res.json()).then(data => setSubtasks(data));
  }, [task.id]);

  // 更新任务
  const updateTask = updatedTask => {
    fetch(`/api/tasks/${task.id}`, {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(updatedTask)
    })
      .then(res => res.json())
      .then(data => {
        setTask(data);
        if (parentTask) {
          const updatedParentTask = { ...parentTask };
          updatedParentTask.subtasks = updatedParentTask.subtasks.map(t => t.id === task.id ? data : t);
          setParentTask(updatedParentTask);
        }
      });
  };

  // 添加子任务
  const addSubtask = () => {
    const newSubtask = { name: '', subtasks: [] };
    fetch(`/api/subtasks`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(newSubtask)
    })
      .then(res => res.json())
      .then(data => {
        setSubtasks([...subtasks, data]);
        if (task.subtasks.length === 0) {
          const updatedTask = { ...task };
          updatedTask.subtasks = [data];
          updateTask(updatedTask);
        }
      });
  };

  // 删除子任务
  const deleteSubtask = subtask => {
    fetch(`/api/subtasks/${subtask.id}`, {
      method: "DELETE"
    })
      .then(() => {
        setSubtasks(subtasks.filter(t => t.id !== subtask.id));
        if (subtasks.length === 0) {
          const updatedTask = { ...task };
          updatedTask.subtasks = [];
          updateTask(updatedTask);
        }
      });
  };

  return (
    <div className="border-2">
      <div>{task.name}</div>
      <button onClick={addSubtask}>添加子任务</button>
      {subtasks.map((subtask, index) => (
        <TaskObjComp key={index} task={subtask} setTask={setSubtasks} parentTask={task} setParentTask={setParentTask} />
      ))}
    </div>
  );
};

API 路由

import { MongoClient } from "mongodb";

const client = new MongoClient("mongodb://localhost:27017");
await client.connect();

const db = client.db("taskdb");

app.post("/api/tasks", async (req, res) => {
  const result = await db.collection("tasks").insertOne(req.body);
  res.status(201).json(result.ops[0]);
});

app.put("/api/tasks/:id", async (req, res) => {
  const result = await db.collection("tasks").updateOne({ _id: ObjectId(req.params.id) }, { $set: req.body });
  res.status(200).json(result.ops[0]);
});

app.post("/api/subtasks", async (req, res) => {
  const result = await db.collection("subtasks").insertOne(req.body);
  res.status(201).json(result.ops[0]);
});

app.delete("/api/subtasks/:id", async (req, res) => {
  const result = await db.collection("subtasks").deleteOne({ _id: ObjectId(req.params.id) });
  res.status(204).send();
});