🚀 深入理解React Hooks与本地存储：构建高效前端应用📖 引言在当今快速发展的前端技术生态中，React

📖 引言

"在现代前端开发的浪潮中，React以其组件化和声明式编程的特性，成为了构建用户界面的主流选择。"

在当今快速发展的前端技术生态中，React已经成为了开发者构建现代Web应用的首选框架之一。自React 16.8版本引入Hooks以来，函数式组件的能力得到了革命性的提升，使得状态管理和副作用处理变得更加简洁和直观。与此同时，本地存储作为前端数据持久化的重要手段，在提升用户体验和应用性能方面发挥着不可或缺的作用。

🎯 本文将为您带来

📚 深度解析 React Hooks的核心概念与实践
🔧 实战指导 如何通过自定义Hooks来封装和复用逻辑
💾 全面对比 前端本地存储的几种方式（localStorage vs Cookie）
🛠️ 项目实践 结合Todo List应用案例，展示最佳实践
🎨 代码优化 提升代码可读性和可维护性的技巧

无论您是React新手还是经验丰富的开发者，本文都将为您提供宝贵的见解和实践指导，帮助您更好地理解和运用React Hooks与本地存储，从而构建出更高效、更健壮的前端应用。

💾 本地存储：数据持久化的基石

在Web开发中，本地存储是客户端存储数据的一种方式，它允许Web应用程序在用户的浏览器中存储数据，以便在用户下次访问时能够快速加载或恢复数据。这对于提升用户体验、减少服务器请求以及实现离线功能至关重要。本节将详细介绍两种主要的本地存储机制：localStorage和Cookie，并对比它们的特点和适用场景。

🌟 localStorage：浏览器端的键值对存储

localStorage是HTML5提供的一种Web存储机制，它允许Web应用程序在用户的浏览器中以键值对的形式存储大量数据（通常为5MB左右，具体取决于浏览器）。localStorage存储的数据没有过期时间，除非用户手动清除浏览器缓存，否则数据会一直保留在本地。这使得它非常适合存储不经常变动且需要长期保存的数据，例如用户偏好设置、离线数据缓存等。

📊 localStorage的核心特性

特性	详细说明
🗄️ 存储容量	通常为5-10MB，远超Cookie的4KB限制
⏰ 生命周期	永久存储，除非用户手动清除或代码删除
🔒 安全性	受同源策略保护，不同域名无法访问
🌐 访问权限	仅限客户端JavaScript访问，服务器无法直接读取

🛠️ localStorage API详解与示例

localStorage提供了一组简单易用的API，用于数据的存储、读取、删除和清空。需要注意的是，localStorage存储的数据都是字符串类型，因此在存储JavaScript对象或数组时，需要先使用JSON.stringify()将其转换为JSON字符串；读取时则需要使用JSON.parse()将其转换回JavaScript对象或数组。

// 存储字符串数据
localStorage.setItem("username", "Manus AI");

// 存储JavaScript对象（需要先转换为JSON字符串）
const userSettings = { theme: "dark", notifications: true };
localStorage.setItem("userSettings", JSON.stringify(userSettings));

// 读取字符串数据
const username = localStorage.getItem("username");
console.log("用户名:", username); // 输出: 用户名: Manus AI

// 读取JavaScript对象（需要先解析JSON字符串）
const savedSettings = localStorage.getItem("userSettings");
const parsedSettings = JSON.parse(savedSettings);
console.log("用户设置:", parsedSettings.theme); // 输出: 用户设置: dark

// 删除指定键的数据
localStorage.removeItem("username");

// 清空所有localStorage数据（谨慎使用）
// localStorage.clear();

在Todo List应用中的应用：

在我们的Todo List应用中，useTodos自定义Hook就巧妙地利用了localStorage来持久化待办事项列表。这意味着即使用户关闭浏览器或刷新页面，他们的待办事项也不会丢失。具体实现是在useTodos Hook内部，通过useEffect监听todos数组的变化，一旦todos发生改变，就将其最新的状态保存到localStorage中。

// useTodos.js 核心片段
import { useState, useEffect } from "react";

export const useTodos = () => {
  // 初始化时尝试从localStorage加载数据，如果不存在则默认为空数组
  const [todos, setTodos] = useState(() => {
    try {
      const savedTodos = localStorage.getItem("todos");
      return savedTodos ? JSON.parse(savedTodos) : [];
    } catch (error) {
      console.error("从localStorage加载数据失败:", error);
      return [];
    }
  });

  // 当todos数组变化时，将其保存到localStorage
  useEffect(() => {
    try {
      localStorage.setItem("todos", JSON.stringify(todos));
    } catch (error) {
      console.error("保存数据到localStorage失败:", error);
    }
  }, [todos]); // 依赖项为todos，确保todos变化时触发

  // ... 其他待办事项操作逻辑
  return { todos, setTodos /* ...其他方法 */ };
};

🍪 Cookie：HTTP的"小饼干"

Cookie是HTTP协议中用于在客户端存储少量数据的一种机制。它最初设计用于在无状态的HTTP协议中维护会话状态。每次HTTP请求时，浏览器都会自动将与该域名相关的Cookie发送给服务器，服务器也可以通过响应头设置Cookie。Cookie通常用于存储用户会话ID、用户身份验证信息、购物车内容等。

🔍 Cookie的深度解析

Cookie的工作原理基于HTTP协议的请求-响应模式。当服务器需要在客户端存储信息时，它会在HTTP响应头中包含Set-Cookie指令；当客户端再次向服务器发送请求时，浏览器会自动在请求头中包含相关的Cookie信息。Cookie的这些特性决定了它在某些场景下的独特优势和局限性。

📊 localStorage vs Cookie：全面对比

对比维度	localStorage	Cookie
🗄️ 存储容量	5-10MB	~4KB
⏰ 生命周期	永久（除非手动删除）	可设置过期时间
🌐 服务器访问	❌ 无法直接访问	✅ 自动随HTTP请求发送
🔒 安全性	同源策略保护	可设置HttpOnly、Secure等
🚀 性能影响	无网络开销	每次请求都发送
🛠️ API易用性	简单直观	相对复杂（需手动解析）
🎯 适用场景	用户偏好、缓存数据	会话管理、身份验证

总结：

localStorage和Cookie各有优缺点，适用于不同的场景。localStorage更适合在客户端存储大量非敏感数据，而Cookie则更适合存储少量与会话相关的数据，并且需要与服务器进行交互。在选择本地存储方式时，应根据数据的性质、大小、安全性要求以及是否需要与服务器交互等因素进行综合考虑。

除了localStorage和Cookie，还有sessionStorage（与localStorage类似，但数据在浏览器会话结束时清除）和IndexedDB（浏览器端的NoSQL数据库，适合存储大量结构化数据，可达GB级别）等本地存储技术，它们共同构成了Web前端数据持久化的完整解决方案。

⚛️ React Hooks：函数式组件的革命

React Hooks的引入标志着React开发范式的一次重大变革。它不仅解决了类组件中存在的诸多问题，更重要的是，它为函数式编程在React中的应用开辟了新的道路。让我们深入探讨Hooks的核心概念、设计哲学以及实际应用。

🎯 Hooks的设计哲学

React Hooks的设计遵循了几个核心原则，这些原则共同构成了现代React开发的基础：

1. 🔄 逻辑复用的新范式

在Hooks出现之前，React组件间的逻辑复用主要依赖于高阶组件（HOC）和渲染属性（Render Props）模式。这些模式虽然能够实现逻辑复用，但往往会导致"包装地狱"（Wrapper Hell）的问题，即组件层级嵌套过深，代码可读性和维护性下降。Hooks提供了一种更优雅的解决方案，它允许我们将组件逻辑（包括状态管理、副作用处理等）封装成一个可复用的函数，从而避免了不必要的组件嵌套。

2. 🧩 关注点分离

Hooks允许我们按照逻辑关注点而不是生命周期方法来组织代码。这意味着您可以将处理用户输入、数据获取、订阅外部事件等不同逻辑的代码组织在一起，而不是分散在不同的生命周期方法中。这种组织方式更符合人类的思维模式，使得代码更加清晰、易于理解和维护。

🔧 核心Hooks深度解析

useState：状态管理的艺术

useState是React中最基础也是最重要的Hook之一。它允许您在函数式组件中添加状态。每次状态更新时，React都会重新渲染组件，并使用最新的状态值。useState返回一个包含当前状态值和更新该状态的函数的数组。

基本用法：

import React, { useState } from 'react';

function Counter() {
  // 声明一个名为count的状态变量，并初始化为0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>你点击了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>
        点击我
      </button>
    </div>
  );
}

解释：

useState(0)：初始化count状态为0。
count：当前的状态值。
setCount：一个函数，用于更新count的值。调用setCount会触发组件的重新渲染。

useEffect：副作用管理的智慧

useEffect是React中处理副作用（side effects）的主要工具。副作用是指那些在组件渲染过程中或渲染之后发生，但又不是直接参与渲染的逻辑，例如数据获取、订阅事件、手动更改DOM等。useEffect在组件渲染后执行，并且可以根据依赖项的变化重新执行。

基本用法：

import React, { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    // 这是一个副作用：每秒更新一次秒数
    const intervalId = setInterval(() => {
      setSeconds(prevSeconds => prevSeconds + 1);
    }, 1000);

    // 清理函数：在组件卸载或副作用重新执行前清除定时器
    return () => clearInterval(intervalId);
  }, []); // 空数组作为依赖项，表示只在组件挂载和卸载时执行一次

  return (
    <div>
      <p>计时器: {seconds} 秒</p>
    </div>
  );
}

解释：

useEffect的第一个参数是一个函数，包含了副作用逻辑。
useEffect的第二个参数是一个依赖项数组。当数组中的任何值发生变化时，副作用会重新执行。如果传入空数组[]，则副作用只在组件挂载时执行一次，并在组件卸载时执行清理函数。如果省略依赖项数组，副作用会在每次渲染后都执行。
return () => clearInterval(intervalId)：这是useEffect的清理函数。它会在组件卸载时执行，或者在副作用重新执行前执行，用于清理上一次副作用留下的资源，防止内存泄漏。

🎨 自定义Hooks：逻辑复用的艺术

自定义Hooks是React Hooks生态系统的精髓所在。它们允许我们将组件逻辑抽象成可复用的函数，从而实现真正的逻辑复用。一个自定义Hook就是一个JavaScript函数，其名称以use开头，并且可以调用其他的Hooks。

为什么需要自定义Hooks？

想象一下，如果您有多个组件都需要从localStorage读取和保存数据，或者都需要处理表单输入逻辑。如果没有自定义Hooks，您可能需要在每个组件中重复编写相同的useState和useEffect逻辑。这会导致代码冗余、难以维护。

自定义Hooks解决了这个问题。它将这些可复用的逻辑封装起来，使得任何组件都可以通过简单地调用这个自定义Hook来获得所需的功能，而无需关心其内部实现细节。

自定义Hooks的优势：

逻辑复用： 将可复用的逻辑从组件中抽离出来，提高代码的复用性。
关注点分离： 组件可以更专注于UI的渲染和交互，而将复杂的逻辑交给自定义Hooks处理，使得组件代码更加清晰。
提高可维护性： 逻辑集中在自定义Hook中，修改和维护更加方便。
拥抱函数式编程： 鼓励开发者以函数式的方式思考和组织代码，使得React应用更加符合函数式编程范式。

🛠️ useTodos：一个完整的自定义Hook案例

在本文提供的Todo List应用中，useTodos.js就是一个典型的自定义Hook。它封装了Todo List应用中的所有核心业务逻辑，包括待办事项的添加、切换完成状态、删除以及与localStorage的交互。让我们来详细解析这个自定义Hook的实现：

// useTodos.js - 核心逻辑封装
import { useState, useEffect, useCallback } from "react";

export const useTodos = () => {
  // 1. 状态初始化：从localStorage恢复数据
  const [todos, setTodos] = useState(() => {
    try {
      const savedTodos = localStorage.getItem("todos");
      return savedTodos ? JSON.parse(savedTodos) : [];
    } catch (error) {
      console.error("恢复todos数据失败:", error);
      return [];
    }
  });

  // 2. 数据持久化：自动保存到localStorage
  useEffect(() => {
    try {
      localStorage.setItem("todos", JSON.stringify(todos));
    } catch (error) {
      console.error("保存todos数据失败:", error);
    }
  }, [todos]); // 依赖项为todos，当todos变化时触发副作用

  // 3. 添加待办事项
  const addTodos = useCallback((text) => {
    if (!text || !text.trim()) return;
    const newTodo = {
      id: Date.now(),
      text: text.trim(),
      isComplete: false,
    };
    setTodos(prevTodos => [...prevTodos, newTodo]);
  }, []);

  // 4. 切换完成状态
  const onToggle = useCallback((id) => {
    setTodos(prevTodos => 
      prevTodos.map(todo => 
        todo.id === id 
          ? { ...todo, isComplete: !todo.isComplete }
          : todo
      )
    );
  }, []);

  // 5. 删除待办事项
  const onDelete = useCallback((id) => {
    setTodos(prevTodos => prevTodos.filter(todo => todo.id !== id));
  }, []);

  // 6. 返回Hook的公共接口
  return {
    todos,
    addTodos,
    onToggle,
    onDelete,
  };
};

代码解析：

状态初始化 (useState)： useTodos Hook内部使用useState来管理todos数组。在初始化时，它尝试从localStorage中读取之前保存的待办事项。如果localStorage中没有数据，则初始化为一个空数组。这确保了应用在刷新后能够恢复之前的状态。
数据持久化 (useEffect)： useEffect Hook用于处理将todos数组持久化到localStorage的副作用。每当todos数组发生变化时（即todos作为useEffect的依赖项），useEffect内部的回调函数就会执行，将最新的todos数组转换为JSON字符串并保存到localStorage中。这实现了数据的自动保存。
业务逻辑函数 (addTodos, onToggle, onDelete)： 这些函数是封装在useTodos Hook内部的业务逻辑。它们分别负责添加新的待办事项、切换待办事项的完成状态以及删除待办事项。这些函数都通过调用setTodos来更新todos状态，从而触发组件的重新渲染。这里使用了useCallback来优化这些函数的性能，确保它们在依赖项不变的情况下不会被重复创建。
- addTodos：创建一个新的待办事项对象，包含唯一的id（使用Date.now()生成时间戳）、文本内容和初始的isComplete状态，然后将其添加到todos数组的末尾。
- onToggle：遍历todos数组，找到与传入id匹配的待办事项，然后使用展开运算符（...todo）创建一个新的对象，并将其isComplete状态取反。这种方式确保了状态的不可变性，是React中更新数组或对象状态的推荐做法。
- onDelete：使用filter方法从todos数组中移除与传入id匹配的待办事项，同样保持了状态的不可变性。
返回值： useTodos Hook最终返回一个包含todos状态以及所有业务逻辑函数的对象。这样，任何调用useTodos的组件都可以方便地访问和使用这些状态和函数，而无需关心其内部实现。

通过useTodos这个自定义Hook，我们可以看到，所有的Todo List相关逻辑都被集中管理，使得Todos组件（在index.jsx中）变得非常简洁，它只需要调用useTodos并将其返回的状态和函数传递给子组件即可。这极大地提高了代码的可读性和可维护性，也体现了自定义Hooks在逻辑复用方面的强大能力。

🛠️ Todo List项目实践：自定义Hooks的优势

为了更好地理解React Hooks和自定义Hooks在实际项目中的应用，我们以一个简单的Todo List应用为例进行说明。这个应用由以下几个核心组件和自定义Hook组成：

index.jsx (主应用组件)
TodoForm.jsx (添加待办事项的表单组件)
TodoList.jsx (显示待办事项列表的组件)
TodoItem.jsx (单个待办事项的组件)
useTodos.js (自定义Hook，封装Todo List的核心逻辑)

🏗️ 项目结构概览

📁 Todo List Application
├── index.jsx
├── TodoForm.jsx
├── TodoList.jsx
├── TodoItem.jsx
└── hooks
    └── useTodos.js

这种结构清晰地将UI组件和业务逻辑分离，使得项目更易于管理和扩展。

📱 组件职责与数据流

1. 🎯 `index.jsx` (主应用组件)

index.jsx是整个Todo List应用的入口组件。它主要负责集成各个子组件，并利用useTodos自定义Hook来获取和管理待办事项的数据和操作函数。它的主要职责是作为数据的"中央枢纽"，将从useTodos获取到的状态和操作函数通过props传递给子组件。

// index.jsx - 应用的入口和数据流中心
import React from "react";
import TodoForm from "./TodoForm";
import TodoList from "./TodoList";
import { useTodos } from "./hooks/useTodos"; // 引入自定义Hook

const Todos = () => {
  // 🎣 调用自定义Hook，获取所有Todo相关的状态和方法
  const {
    todos,
    addTodos,
    onToggle,
    onDelete,
  } = useTodos();

  return (
    <div className="app">
      {/* TodoForm负责添加新的待办事项，通过onAddTodo回调通知父组件 */}
      <TodoForm onAddTodo={addTodos} />
      {/* TodoList负责展示待办事项列表，并传递操作函数给子项 */}
      <TodoList
        todos={todos}
        onToggle={onToggle}
        onDelete={onDelete}
      />
    </div>
  );
};

export default Todos;

解释：

Todos组件通过调用useTodos()来获取todos数组（待办事项列表）以及addTodos、onToggle、onDelete等操作函数。
它将addTodos函数作为onAddTodo属性传递给TodoForm组件，以便TodoForm在用户提交新待办事项时能够调用它。
它将todos数组以及onToggle、onDelete函数作为属性传递给TodoList组件，以便TodoList能够渲染列表并处理每个待办事项的交互。

2. 📝 `TodoForm.jsx` (添加待办事项的表单组件)

TodoForm组件负责提供一个输入框和添加按钮，用于用户输入新的待办事项。它管理自己的输入框状态，并通过onAddTodo回调函数将新的待办事项文本传递给父组件。

// TodoForm.jsx - 负责用户输入和提交新待办事项
import React, { useState } from "react";

const TodoForm = ({ onAddTodo }) => {
  const [text, setText] = useState(""); // 管理输入框的私有状态

  const handleSubmit = (e) => {
    e.preventDefault(); // 阻止表单默认提交行为
    const trimmedText = text.trim();
    if (!trimmedText) return; // 如果输入为空，则不处理
    onAddTodo(trimmedText); // 调用父组件传递的回调函数，添加待办事项
    setText(""); // 清空输入框
  };

  return (
    <>
      <h1 className="header">TodoList</h1>
      <form className="todo-input" onSubmit={handleSubmit}>
        <input
          type="text"
          value={text} // 绑定输入框的值到text状态
          onChange={(e) => setText(e.target.value)} // 更新text状态
          placeholder="请输入todo内容"
          required
        />
        <button type="submit">Add</button>
      </form>
    </>
  );
};

export default TodoForm;

解释：

TodoForm使用useState来管理输入框的当前值text。
handleSubmit函数处理表单提交事件。它会获取输入框的值，去除首尾空格，如果非空则调用onAddTodo函数（这是从父组件Todos通过props传递下来的addTodos函数），并将输入框清空。

3. 📋 `TodoList.jsx` (显示待办事项列表的组件)

TodoList组件接收todos数组以及onToggle和onDelete操作函数作为props。它遍历todos数组，为每个待办事项渲染一个TodoItem组件。

// TodoList.jsx - 负责渲染待办事项列表
import React from "react";
import TodoItem from "./TodoItem";

const TodoList = ({ todos, onToggle, onDelete }) => {
  return (
    <ul className="todo-list">
      {todos.length > 0 ? (
        todos.map((todo) => (
          <TodoItem
            key={todo.id} // 唯一key，用于React高效渲染列表
            todo={todo} // 传递单个待办事项数据
            onToggle={() => onToggle(todo.id)} // 传递切换状态的回调
            onDelete={() => onDelete(todo.id)} // 传递删除的回调
          />
        ))
      ) : (
        <p>暂无待办项</p> // 列表为空时的提示
      )}
    </ul>
  );
};

export default TodoList;

解释：

TodoList组件接收todos数组，并使用map方法遍历数组，为每个todo对象渲染一个TodoItem组件。
它将每个todo对象作为todo属性传递给TodoItem。同时，它也传递了两个回调函数onToggle和onDelete，这些函数在TodoItem中被调用时，会触发父组件（最终是useTodos Hook）中的相应逻辑。

4. ✅ `TodoItem.jsx` (交互式单项组件)

TodoItem组件接收单个待办事项的数据(todo)以及onToggle和onDelete操作函数作为props。它负责显示待办事项的文本、完成状态，并提供切换和删除的功能。

// TodoItem.jsx - 负责单个待办事项的展示和交互
import React from "react";

const TodoItem = ({ todo, onToggle, onDelete }) => {
  const { id, text, isComplete } = todo; // 解构出待办事项的属性

  return (
    <li className="todo-item">
      <input
        type="checkbox"
        checked={isComplete} // 绑定复选框的选中状态
        onChange={onToggle} // 切换完成状态
      />
      <span className={isComplete ? "completed" : ""}>{text}</span> {/* 根据完成状态添加样式 */}
      <button onClick={onDelete}>Delete</button> {/* 删除待办事项 */}
    </li>
  );
};

export default TodoItem;

解释：

TodoItem组件接收单个todo对象以及onToggle和onDelete回调函数。
它渲染一个复选框来显示和切换待办事项的完成状态，一个span元素来显示待办事项文本（根据isComplete状态添加completed类名），以及一个删除按钮。
当用户点击复选框或删除按钮时，会分别调用onToggle和onDelete回调函数，这些函数会通知父组件进行相应的状态更新。

🎯 自定义Hooks的优势体现

通过上述项目结构和组件职责的划分，我们可以清晰地看到自定义Hooks所带来的巨大优势：

逻辑与UI分离： useTodos.js将所有与待办事项相关的状态管理和业务逻辑（添加、切换、删除、持久化）都封装起来。这意味着index.jsx、TodoForm.jsx、TodoList.jsx和TodoItem.jsx这些UI组件可以完全专注于它们的渲染职责，而无需关心数据是如何存储和操作的。这种分离使得组件更加“纯粹”，易于理解和测试。
代码复用性： 如果未来我们需要在应用的另一个部分（例如，一个用户个人中心页面）也展示待办事项，我们不需要重新编写一套状态管理和操作逻辑。只需在新的组件中再次调用useTodos()即可复用所有功能。这大大减少了重复代码，提高了开发效率。
可维护性： 当待办事项的业务逻辑发生变化时（例如，增加一个新的字段，或者改变持久化方式），我们只需要修改useTodos.js这一个文件，而不需要触及其他UI组件。这使得代码的维护变得更加集中和高效，降低了引入bug的风险。
清晰的数据流： 自定义Hooks使得数据流向更加清晰。数据和操作函数从useTodos流向index.jsx，再通过props自上而下地传递给子组件。子组件通过回调函数将用户操作“通知”给父组件，最终由useTodos来处理状态更新。这种单向数据流模式使得应用的行为更容易预测和调试。
测试友好： 由于逻辑被封装在独立的Hook中，我们可以更容易地对useTodos进行单元测试，而无需渲染整个React组件树。这有助于确保业务逻辑的正确性。

总之，自定义Hooks是React中实现逻辑复用和关注点分离的强大工具。它们使得函数式组件能够处理复杂的业务逻辑，同时保持代码的简洁和可维护性，是构建大型React应用不可或缺的一部分。

🚀 深入理解React Hooks与本地存储：构建高效前端应用

📖 引言

🎯 本文将为您带来

💾 本地存储：数据持久化的基石

🌟 localStorage：浏览器端的键值对存储

📊 localStorage的核心特性

🛠️ localStorage API详解与示例

🍪 Cookie：HTTP的"小饼干"

🔍 Cookie的深度解析

📊 localStorage vs Cookie：全面对比

⚛️ React Hooks：函数式组件的革命

🎯 Hooks的设计哲学

1. 🔄 逻辑复用的新范式

2. 🧩 关注点分离

🔧 核心Hooks深度解析

useState：状态管理的艺术

useEffect：副作用管理的智慧

🎨 自定义Hooks：逻辑复用的艺术

🛠️ useTodos：一个完整的自定义Hook案例

🛠️ Todo List项目实践：自定义Hooks的优势

🏗️ 项目结构概览

📱 组件职责与数据流

1. 🎯 index.jsx (主应用组件)

2. 📝 TodoForm.jsx (添加待办事项的表单组件)

3. 📋 TodoList.jsx (显示待办事项列表的组件)

4. ✅ TodoItem.jsx (交互式单项组件)

🎯 自定义Hooks的优势体现

1. 🎯 `index.jsx` (主应用组件)

2. 📝 `TodoForm.jsx` (添加待办事项的表单组件)

3. 📋 `TodoList.jsx` (显示待办事项列表的组件)

4. ✅ `TodoItem.jsx` (交互式单项组件)