React 资源

虽然我们在教程中将所有 CSS 保留在一个 index.css 文件中，但 React 应用程序通常会为每个组件定义样式表。在由 Vite 提供支持的应用程序中，可以通过创建 CSS 文件并将其导入到相应的组件模块来完成此操作。

例如：我们可以编写一个专门的 Form.css 文件来存放与 <Form /> 组件相关的 CSS，然后将样式导入到 Form.jsx 中，如下所示

import Form from "./Form";
import "./Form.css";

这种方法使您可以轻松识别和管理属于特定组件的 CSS，并将其与应用程序范围的样式区分开来。但是，它也会将您的样式表分散到您的代码库中，这种分散可能不值得。对于具有数百个独特视图和大量移动部件的较大应用程序来说，使用组件级样式是有意义的，从而限制了在任何给定时间发送给用户的无关代码量。

您可以在 Smashing Magazine 文章 在 React 中为组件设置样式 中阅读有关此方法和其他 React 组件样式设置方法的更多信息。

在本教程中，我们使用 console.log() 来检查应用程序的状态和道具，您还将在 CLI 和浏览器的 JavaScript 控制台中看到一些有用的警告和错误消息。但我们可以做更多的事情。

React DevTools 实用程序允许您直接在浏览器中检查 React 应用程序的内部结构。它会在浏览器的开发者工具中添加一个新的面板，允许您检查各种组件的状态和道具，甚至编辑状态和道具，对您的应用程序进行即时更改。

此屏幕截图显示了我们完成的应用程序在 React DevTools 中的样子

在左侧，我们看到了构成应用程序的所有组件，包括从数组渲染的项目的唯一键。在右侧，我们看到了 App 组件使用的道具和钩子。还要注意，Form、FilterButton 和 Todo 组件向右缩进，这表示 App 是它们的父组件。这种视图非常适合一目了然地了解父子关系，对于了解更复杂的应用程序至关重要。

React DevTools 有多种形式

• 一个 Chrome 浏览器扩展程序。
• 一个 Firefox 浏览器扩展程序。
• 一个 Microsoft Edge 浏览器扩展程序。
• 一个 可以使用 npm 或 Yarn 安装的独立应用程序。

尝试安装其中一个，然后使用它来检查您刚构建的应用程序！

您可以在 React 文档中阅读有关 React DevTools 的更多信息。

在本教程中，我们使用 useState() 钩子来管理一小部分事件处理程序函数中的状态。这对于学习目的来说很好，但它将我们的状态管理逻辑绑定到组件的事件处理程序中，尤其是 <Todo /> 组件的事件处理程序。

useReducer() 钩子为开发人员提供了一种将不同的但相关的状态管理逻辑合并到一个函数中的方法。它比 useState() 更复杂，但它是一个非常有用的工具。您可以在 React 文档中阅读有关 useReducer() 的更多信息。

我们在本教程中构建的应用程序利用组件道具将数据从其 App 组件传递给需要它的子组件。大多数情况下，道具是共享数据的合适方法；但是，对于复杂的、深度嵌套的应用程序来说，它们并不总是最佳选择。

React 提供了 Context API，作为一种将数据提供给需要它的组件而不通过组件树向下传递道具的方法。还有一种 useContext 钩子 可以促进这一过程。

如果您想亲自尝试使用此 API，Smashing Magazine 已经编写了一篇关于 React 上下文的 入门文章。

虽然本教程没有提到，但可以使用 JavaScript 类 构建 React 组件，这些组件称为类组件。在钩子出现之前，类是将状态引入组件或管理渲染副作用的唯一方法。它们仍然是处理某些边缘情况的唯一方法，并且在传统的 React 项目中很常见。官方的 React 文档维护着 Component 基类的参考，但建议使用钩子来管理 状态 和 副作用。

诸如 React Testing Library 之类的库使编写 React 组件的单元测试成为可能。有很多方法可以运行这些测试。测试框架 Vitest 构建在 Vite 之上，是您基于 Vite 的 React 应用程序的绝佳伴侣。 Jest 是另一个可以与 React 一起使用的流行测试框架。

虽然路由传统上由服务器而不是用户计算机上的应用程序处理，但可以配置 Web 应用程序以读取和更新浏览器的地址，并呈现某些用户界面。这称为客户端路由。您可以为应用程序创建许多独特的路由（例如 /home、/dashboard 或 /login）。

React Router 是 React 最流行、最强大的客户端路由库。它允许开发人员定义应用程序的路由，并将组件与这些路由关联起来。它还提供许多有用的钩子和组件来管理浏览器的地址和历史记录。

• 上一篇
• 概述：了解客户端 JavaScript 框架
• 下一篇