最大限度地发挥你的 React 技能：从头到尾构建一个待办事项列表应用程序（使用 TypeScript + Vite）

在这篇博文中，我们将介绍您 和 基本 React 应用程序所需的一切。无论您是刚开始使用 React 的初学者，还是希望提高技能的经验丰富的开发人员，本指南都适合您。 理解 构建 本指南将带您完成构建功能齐全的待办事项列表应用程序的整个过程，包括设计、布局、状态管理等。我们将使用功能组件和钩子。我们将学习如何使用 state 和 props 在组件之间传递数据，以及如何处理用户输入和更新应用程序的状态。 到本指南结束时，我们将对如何从头构建 React 应用程序有一个扎实的了解，您将能够利用新学到的知识来构建自己的 React 项目。 那么，让我们开始吧！ *您可以在 找到我们将要构建的应用程序的代码，并在 实时版本。 此处 此处找到 简介 我们将使用 TypeScript 编写代码，使用 Vite 开发和构建应用程序。 打字稿 是一种建立在 JavaScript 之上的强类型编程语言。实际上，如果您已经了解 JavaScript，那么使用 TypeScript 所需要做的就是学习如何使用类型和接口。 TypeScript 类型和接口允许我们定义我们在代码中使用的数据类型。有了这个，我们可以及早发现错误并避免问题的发生。 例如，如果一个函数接受一个 ，但我们向它传递一个 ，TypeScript 会立即报错： number string const someFunc = (parameter: number) => {...}; someFunc('1') // Argument of type 'string' is not assignable to parameter of type 'number'. 如果我们使用 JavaScript，我们可能只会在稍后发现错误。 我们并不总是需要指定类型，因为 TypeScript 通常可以自动推断它们。 您可以在 学习 TypeScript 的基础知识。 （或者只是忽略类型。） 此处 维特 启动 React 应用程序的最常见方法可能是使用 。我们将改用 （发音类似“veet”）。但不要担心，它同样简单，但效率更高。 create-react-app Vite 使用像 这样的工具（由 create-react-app 在后台使用），您的整个应用程序需要捆绑在一个文件中，然后才能提供给浏览器。另一方面，Vite 利用浏览器中的原生 ES 模块，通过 更高效地进行捆绑，根据需要提供部分源代码。 webpack Rollup Vite 还可以通过热模块替换大大加快开发时间——这意味着每当对源代码进行更改时，只会更新更改，而不是整个应用程序。 除此之外，Vite 还提供对 Typescript、JSX 和 TSX、CSS 等的原生支持。 与 create-react-app 类似，Vite 提供了一个名为 create-vite 的工具，它允许我们使用基本模板（包括 Vanilla JS 的选项）或使用像 React 这样的库来快速启动一个新项目。 需要明确的是，我们 像 Vite 或 create-react-app 这样的工具来构建 React 应用程序，但它们通过负责设置项目、打包代码、使用转译器等让我们的生活更轻松。 不需要 深入 React JSX / 多伦多证券交易所 React 允许我们直接在代码中添加标记，这些代码稍后将被编译为纯 JavaScript。这称为 。当我们使用 JSX 时，我们可以将文件保存为 JavaScript 的 .jsx 或 TypeScript 的 .tsx。 JSX 它看起来像这样： const element = Hello, world! ; 它类似于 HTML，但它嵌入在 JavaScript 文件中，它允许我们使用编程逻辑来操作标记。我们还可以在 JSX 中添加 JavaScript 代码，只要它在大括号内即可。 例如，如果我们有一个要呈现为不同段落元素的文本数组，我们可以这样做： const paragraphs = ["First", "Second", "Third"]; paragraphs.map((paragraph) => {paragraph}

); 它会被编译成这样： First

Second

Third

但是，如果我们试图这样做，那是行不通的。那是因为 React 与组件一起工作，而 JSX 需要在这些组件内部呈现。 反应组件 React 组件可以使用 JavaScript 或仅使用普通 来编写。我们将专注于函数组件，因为它们是当今最新和推荐的编写 React 组件的方式。 类 函数 一个组件由一个函数定义，该函数将返回将由浏览器编译和呈现的 JSX。所以扩展上面的例子，如果我们想渲染段落元素，它看起来像这样： // Define the component const Component = () => { const paragraphs = ["First", "Second", "Third"]; return ( <> {paragraphs.map((paragraph) => ( {paragraph}

))} ); }; // Use the component in the same way you use an HTML element in the JSX const OtherComponent = () => { return ; }; 道具 现在也许我们想用不同的信息重用这个组件。我们可以通过使用 props 来做到这一点——它只是一个保存一些数据的 JavaScript 对象。 在我们的示例中，我们可以将其传递给组件，而不是对数组进行硬编码。结果是一样的，但现在组件可以重用了。 如果我们使用 TypeScript，我们需要在 props 对象中指定数据的类型（它们是什么没有上下文，所以 TypeScript 无法推断它们），在这种情况下是一个字符串数组（ ). string[] const Component = (props: { paragraphs: string[] }) => { <> {props.paragraphs.map((paragraph) => ( {paragraph}

))} ; }; const OtherComponent = () => { const paragraphs = ["First", "Second", "Third"]; return ; }; 状态 如果我们想要制作一个交互式组件，我们将需要将信息存储在组件的状态中，以便它可以“记住”它。 例如，如果我们想要定义一个简单的计数器来显示按钮被点击的次数，我们需要一种存储和更新该值的方法。 React 允许我们使用 挂钩（ 是一种让您“挂钩”到 React 的函数）。 useState 挂钩 状态和生命周期特性 我们用初始值调用 钩子，它返回给我们一个包含值本身的数组和一个更新它的函数。 useState import { useState } from "react"; const Counter = () => { const [count, setCount] = useState(0); return ( <> {count} setCount(count + 1)}>Increment count ); }; 有了这些知识，我们现在就可以开始构建我们的 React 应用程序了。 创建项目 依赖关系 要使用 Vite，我们需要 **node ** 和一个包管理器。 要安装节点，只需根据您的系统和配置选择 的选项之一。如果您使用的是 Linux 或 Mac，您还可以使用 安装它。 此处 Homebrew 包管理器可以是 或 。在这篇文章中，我们将使用 。 npm yarn npm 创建项目 接下来是创建项目的时候了。在终端中，我们导航到将创建项目的目录，然后运行 create-vite 命令。 $ npm create vite@latest 我们可能会被提示安装额外的包（如 create-vite）。输入 并按回车键继续。 y Need to install the following packages: create-vite@4.0.0 Ok to proceed? (y) 接下来我们将被提示输入项目信息。 输入项目的 。我选择了 。 名称 my-react-project ? Project name: › my-react-project 选择 作为“框架”。 React React 在技术上 ，但不用担心。 是一个库而不是一个框架 ? Select a framework: › - Use arrow-keys. Return to submit. Vanilla Vue ❯ React Preact Lit Svelte Others 选择 作为变体。 TypeScript + SWC （代表 Speedy Web Compiler ）是一个用 Rust 编写的超快速 TypeScript / JavaScript 编译器。他们声称“在单线程上比 Babel 快 20 倍，在四核上快 70 倍”。 SWC ? Select a variant: › - Use arrow-keys. Return to submit. JavaScript TypeScript JavaScript + SWC ❯ TypeScript + SWC 大功告成，项目创建完毕。要以开发模式启动它，我们需要切换到项目目录，安装依赖项并运行 dev 脚本命令。 cd my-react-project npm install npm run dev 几秒钟后，我们将看到类似这样的内容： VITE v4.0.4 ready in 486 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h to show help 如果我们打开浏览器并导航到 / 我们将看到默认的 Vite + React 页面： http://localhost:5173 这意味着一切都应该如此，我们可以开始开发我们的应用程序了。 构建应用程序 文件结构和初始设置 如果我们在我们选择的代码编辑器或 IDE 中打开项目，我们应该看到如下文件结构： 我们可以删除一些样板文件，因为我们不会使用它们（所有 .svg 和 .css 文件）。 可以删除 App 函数中的代码，这样我们就可以： function App() { return ( ) } export default App 我们稍后会回到这个文件。 造型 样式不是这里的重点，但我们将使用 Tailwind CSS，这是一个库，它允许我们通过向 HTML 元素添加类来设置样式。按照 查看反映在您自己的项目中的样式。 这些说明 否则你可以忽略代码中的类。 思考设计：组件布局 设计过程是应用程序开发的一个组成部分，不应被忽视。 要构建我们的待办事项列表应用程序，我们需要首先考虑组件布局。 我们首先模拟一个基本的 UI 并概述所涉及组件的层次结构。 如果您不是设计师，那么就颜色和精确位置而言，它不需要是完美的或最终的 UI — 更重要的是考虑组件结构。 理想情况下，我们的组件应该只负责一件事，遵循 。 单一职责原则 在下图中，紫色的名称是我们将要构建的组件——其他所有内容都是本机 HTML 元素。如果他们在彼此的体内，这意味着可能会有亲子关系。 道具：构建静态版本 有了草图后，我们就可以开始构建应用程序的静态版本了。也就是说，只有 UI 元素，但还没有交互性。这部分非常简单，一旦掌握了它，就涉及大量的输入和很少的思考。 您可以在这个 的分支“static-version”中找到静态版本的代码。完整运行的应用程序的代码是主分支。 GitHub 存储库 容器 如上所述，我们将拥有一个可重复用于应用程序每个部分的容器。此容器展示了组合不同元素的一种方法：将它们作为子元素传递。 // src/components/Container.tsx const Container = ({ children, title, }: { children: JSX.Element | JSX.Element[]; title?: string; }) => { return ( {title && {title} } {children} ); }; export default Container; 它需要一个带有 类型的 参数的 props 对象。 。这意味着我们可以将它与任何其他 HTML 元素或我们创建的任何其他组件组合在一起。它可以呈现在容器内我们想要的任何位置——在本例中是在第二个 div 内。 JSX.Element | JSX.Element[] children JSX.Element | JSX.Element[] 在我们的应用程序中，当我们在 App 组件中使用它们时，它将呈现每个部分（定义如下）。 Container 还带有一个名为 的可选 属性，只要它存在，它就会在 h2 中呈现。 title string // src/App.tsx import Container from "./components/Container"; import Input from "./components/Input"; import Summary from "./components/Summary/Summary"; import Tasks from "./components/Tasks/Tasks"; function App() { return ( ); } export default App; 概括 第一部分是摘要（Summary 组件），显示三个项目（SummaryItem）：任务总数、待处理任务数和已完成任务数。这是另一种组合组件的方法：只需在另一个组件的返回语句中使用它们。 （不过，永远不要在另一个组件中 一个组件很重要，因为这会导致不必要的重新渲染和错误。） 定义 现在我们可以在两个组件中使用静态数据。 // src/components/Summary/SummaryItem.tsx const SummaryItem = ({ itemName, itemValue, }: { itemName: string; itemValue: number; }) => { return ( {itemName} {itemValue} ); }; export default SummaryItem; // src/components/Summary/Summary.tsx import SummaryItem from "./SummaryItem"; const Summary = () => { return ( <> ); }; export default Summary; 你会注意到 SummaryItem 有两个道具： ，类型为字符串， ，类型 。当 SummaryItem 组件在 Summary 组件内部使用时，这些道具将被传递，然后在 SummaryItem JSX 中呈现。 itemName itemValue number 任务 同样，对于任务部分（最后一个），我们有一个呈现 TaskItem 组件的任务组件。 现在也有静态数据。我们稍后需要将 和 作为道具传递给 TaskItem 组件，以使其可重用和动态。 任务名称 状态 // src/components/Tasks/TaskItem.tsx const TaskItem = () => { return ( Task name Delete ); }; export default TaskItem; // src/components/Tasks/Tasks.tsx import TaskItem from "./TaskItem"; const Tasks = () => { return ( ); }; export default Tasks; 输入 最后，输入组件是一个带有标签、文本输入和“添加任务”按钮的表单。现在它什么都不做，但我们很快就会改变它。 // src/components/Input.tsx const InputContainer = () => { return ( Enter your next task: Add task ); }; export default InputContainer; 状态：添加交互性 要在 React 中添加交互性，我们需要将信息存储在组件的状态中。 但在此之前，我们需要考虑我们希望数据如何随时间变化。我们需要确定此数据 ，并确定我们应该使用 来存储此状态。 的最小表示 哪些组件 状态的最小表示 状态应该包含使我们的应用程序具有交互性所需的所有信息——但仅此而已。如果我们可以从不同的值计算出一个值，我们应该只保留其中一个处于状态。这使得我们的代码不仅不那么冗长，而且也不太容易出现涉及矛盾状态值的错误。 在我们的示例中，我们可能认为我们需要跟踪总任务、未决任务和已完成任务的值。 但是要跟踪任务，只需要一个数组，其中包含代表每个任务及其状态（待处理或已完成）的对象。 const tasks = [ { name: "task one", done: false, }, { name: "task two", done: true, }, ]; 有了这些数据，我们总能在渲染时使用数组方法找到我们需要的所有其他信息。我们还避免了矛盾的可能性，例如总共有 4 个任务，但只有 1 个待处理和 1 个已完成的任务。 我们还需要表单中的状态（在输入组件中），以便我们可以使其具有交互性。 国家应该住在哪里 这样想：哪些组件需要访问我们要存储在状态中的数据？如果它是单个组件，则状态可以存在于该组件本身中。如果需要数据的组件不止一个，那么您应该找到这些组件的公共父组件。 在我们的示例中，控制 Input 组件所需的状态只需要在那里访问，因此它可以是该组件的本地状态。 // src/components/Input.tsx import { useState } from "react"; const InputContainer = () => { const [newTask, setNewTask] = useState(""); // Initialize newTask and setNewTask return ( Enter your next task: setNewTask(e.target.value)} // Set newTask to the input value whenever the user types something /> Add task ); }; export default InputContainer; 它所做的是在输入中显示我们的 值，并在输入发生变化时调用 函数（即，当用户键入内容时）。 newTask setNewTask 我们不会立即在 UI 中看到任何更改，但这是必要的，因此我们可以控制输入并访问其值以便稍后使用它。 然而，跟踪任务的状态必须以不同的方式处理，因为它需要在 SummaryItem 组件（我们需要显示总数、待处理和已完成任务的数量）以及 TaskItem 组件（我们需要显示任务本身）。它需要处于相同状态，因为此信息必须始终保持同步。 让我们看一下我们的组件树（您可以为此使用 ）。 React 开发工具 我们可以看到第一个公共父组件是App。所以这就是我们的任务状态将要存在的地方。 有了状态，剩下的就是将数据作为道具传递给需要使用它的组件。 （我们还不担心如何对父状态进行和持久化任何更改，那是下一部分。） // src/App.tsx import { useState } from "react"; import { v4 as uuidv4 } from "uuid"; import Container from "./components/Container"; import Input from "./components/Input"; import Summary from "./components/Summary/Summary"; import Tasks from "./components/Tasks/Tasks"; export interface Task { name: string; done: boolean; id: string; } const initialTasks = [ { name: "task one", done: false, id: uuidv4(), }, { name: "task two", done: true, id: uuidv4(), }, ]; function App() { const [tasks, setTasks] = useState (initialTasks); return ( ); } export default App; 在这里，我们使用虚拟数据 ( ) 初始化任务值，以便我们可以在应用程序完成之前将其可视化。稍后我们可以将其更改为一个空数组，这样新用户在打开应用程序时就不会看到任何任务。 initialTasks 除了 和 属性之外，我们还向我们的任务对象添加了一个 id，因为很快就会需要它。 name done 我们正在定义一个 ，其中包含任务对象中的值类型，并将其传递给 函数。在这种情况下这是必要的，因为当我们将 的初始值更改为空数组时，或者当我们将它作为 props 传递时，TypeScript 将无法推断它。 interface useState tasks 最后，请注意我们将任务作为道具传递给 Summary 和 Tasks 组件。这些组件将需要更改以适应这种情况。 // src/components/Summary/Summary.tsx import { Task } from "../../App"; import SummaryItem from "./SummaryItem"; const Summary = ({ tasks }: { tasks: Task[] }) => { const total = tasks.length; const pending = tasks.filter((t) => t.done === false).length; const done = tasks.filter((t) => t.done === true).length; return ( <> ); }; export default Summary; 我们更新了 Summary 组件，现在它可以接受 作为 prop。我们还定义了值 、 和 ，它们将作为道具传递给 SummaryItem 组件，代替我们之前的静态 。 tasks total pending done itemValue // src/components/Tasks/Tasks.tsx import { Task } from "../../App"; import TaskItem from "./TaskItem"; const Tasks = ({ tasks }: { tasks: Task[] }) => { return ( {tasks.map((t) => ( ))} ); }; export default Tasks; // src/components/Tasks/TaskItem.tsx import { useState } from "react"; const TaskItem = ({ name }: { name: string }) => { const [done, setDone] = useState(false); return ( setDone(!done)} /> {name} Delete ); }; export default TaskItem; 对于 Tasks 组件，我们也将 作为 prop，将其 属性映射到 TaskItem 组件。结果，我们为 数组中的每个对象获得了一个 TaskItem 组件。我们还更新了 TaskItem 组件以接受 作为道具。 task name tasks name 这就是 id 派上用场的地方，因为每次我们有一个子组件列表时，我们都需要传递一个唯一的键。如果我们不添加密钥，这可能会 。 （在生产应用中，id 很可能来自后端。） 导致重新渲染时出现错误 目前的结果是这样的： 我们已经可以看到反映我们的虚拟数据的摘要编号和任务名称。但是我们仍然缺少添加或删除任务的方法。 添加反向数据流 要完成我们的应用程序，我们需要一种方法来更改来自 Input 和 TaskItem 子组件的 App 组件状态（任务数据所在的位置）。 为此，我们可以使用 钩子生成的函数来定义事件处理程序，并将它们作为 props 传递下去。一旦我们这样做了，我们只需在子组件的适当用户交互期间调用它们。 useState 确保 ，因为这会导致错误。更新状态对象时总是用新对象替换状态对象。 在更新状态时永远不要改变状态 下面是我们最终的 App 组件，其中声明了处理程序并将其作为 props 传递给 Input 和 Tasks 组件。 返回一个包含旧任务和新任务的新数组。 为指定的 返回一个具有相反 属性的新数组。 返回一个没有指定 任务的新数组。 handleSubmit toggleDoneTask id done handleDeleteTask id // src/App.tsx import { FormEvent, useState } from "react"; import { v4 as uuidv4 } from "uuid"; import Container from "./components/Container"; import Input from "./components/Input"; import Summary from "./components/Summary/Summary"; import Tasks from "./components/Tasks/Tasks"; export interface Task { name: string; done: boolean; id: string; } function App() { const [tasks, setTasks] = useState ([]); const handleSubmit = (e: FormEvent , value: string) => { e.preventDefault(); const newTask = { name: value, done: false, id: uuidv4(), }; setTasks((tasks) => [...tasks, newTask]); }; const toggleDoneTask = (id: string, done: boolean) => { setTasks((tasks) => tasks.map((t) => { if (t.id === id) { t.done = done; } return t; }) ); }; const handleDeleteTask = (id: string) => { setTasks((tasks) => tasks.filter((t) => t.id !== id)); }; return ( ); } export default App; 这是使用 更新 App 组件状态的最终 Input 组件。 handleSubmit // src/components/Input.tsx import { FormEvent, useState } from "react"; const InputContainer = ({ handleSubmit, }: { handleSubmit: (e: FormEvent , value: string) => void; }) => { const [newTaskName, setNewTaskName] = useState(""); return ( { handleSubmit(e, newTaskName); setNewTaskName(""); }} > Enter your next task: setNewTaskName(e.target.value)} /> Add task ); }; export default InputContainer; 这是最终的 Tasks 组件，我们对其进行更新以将 props 从 App 传递到 TaskItem。我们还添加了一个三元运算符来返回“还没有任务！”没有任务的时候。 // src/components/Tasks/Tasks.tsx import { Task } from "../../App"; import TaskItem from "./TaskItem"; const Tasks = ({ tasks, toggleDone, handleDelete, }: { tasks: Task[]; toggleDone: (id: string, done: boolean) => void; handleDelete: (id: string) => void; }) => { return ( {tasks.length ? ( tasks.map((t) => ( )) ) : ( No tasks yet! )} ); }; export default Tasks; 这是最终的 TaskItem 组件，使用 和 更新 App 组件状态。 toggleDone handleDelete // src/components/Tasks/TaskItem.tsx const TaskItem = ({ name, done, id, toggleDone, handleDelete, }: { name: string; done: boolean; id: string; toggleDone: (id: string, done: boolean) => void; handleDelete: (id: string) => void; }) => { return ( toggleDone(id, !done)} /> {name} handleDelete(id)} > Delete ); }; export default TaskItem; 这是我们添加一些任务后的最终应用程序！ 如果您正在编写代码，则可以按照 部署您自己的应用程序。 这些说明 您可以在 该应用程序的实时版本。 此处找到包含我们经过的所有代码的存储库，以及在此处 找到 最后的话 总之，构建一个待办事项列表应用程序是学习和巩固我们对 React 及其原则的理解的好方法。通过将流程分解为小步骤并遵循最佳实践，我们可以在相对较短的时间内创建功能强大的应用程序。 我们涵盖了： 组件、状态和逆向数据流的关键概念。 应用程序的设计和架构。 单一职责原则等最佳实践 通过遵循本指南中概述的步骤，您现在应该对如何构建简单的 React 应用程序并能够将其应用到您自己的项目有一个扎实的了解。 编码愉快！