21、从 React 类组件迁移到函数组件

从 React 类组件迁移到函数组件

在开发 React 应用时，我们经常会遇到需要从类组件迁移到函数组件的情况。函数组件结合 Hooks 能让代码更简洁、易读和易维护。本文将详细介绍如何将一个基于类组件的待办事项应用迁移到使用 Hooks 的函数组件。

迁移前的准备

在开始迁移之前，我们需要为迁移后的项目创建一个新文件夹，具体操作如下：
1. 将 Chapter13_1 文件夹复制到新的 Chapter13_2 文件夹：

$ cp -R Chapter13_1 Chapter13_2

2. 在 VS Code 中打开新的 Chapter13_2 文件夹。

迁移组件

接下来，我们将依次迁移以下组件：
- TodoItem
- TodoList
- TodoFilterItem
- TodoFilter
- AddTodo
- App

迁移 TodoItem 组件

TodoItem 组件是最简单的迁移组件之一，它不使用任何状态或副作用，因此可以直接将其转换为函数组件。具体步骤如下：
1. 编辑 src/TodoItem.jsx 文件，删除所有现有代码。
2. 定义一个函数组件，它接受 title