React 资源

组件级样式

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

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

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

这种方法可以轻松识别和管理属于特定组件的 CSS，并将其与应用程序范围的样式区分开来。然而，它也会将样式表分散在整个代码库中，这种分散可能不值得。对于拥有数百个独立视图和大量移动部件的更大应用程序，使用组件级样式并因此限制一次发送给用户的无关代码量是有意义的。

您可以在 Smashing Magazine 的文章 Styling Components In React 中阅读更多关于此方法和其他样式化 React 组件的方法。

React DevTools

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

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

此屏幕截图显示了我们的最终应用程序在 React DevTools 中的显示方式

在左侧，我们看到构成应用程序的所有组件，包括从数组渲染的项目的唯一键。在右侧，我们看到 App 组件使用的 props 和 hooks。另请注意，Form、FilterButton 和 Todo 组件向右缩进——这表示 App 是它们的父级。此视图非常适合一目了然地理解父/子关系，对于理解更复杂的应用程序来说是无价的。

React DevTools 有多种形式可用

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

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

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

useReducer() Hook

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

useReducer() hook 为开发人员提供了一种将不同但相关的状态管理逻辑整合到单个函数中的方法。它比 useState() 复杂一些，但它是您工具箱中一个很好的工具。您可以在 React 文档中阅读更多关于 useReducer() 的信息。

Context API

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

React 提供了 Context API，作为一种无需通过组件树传递 props 即可向需要数据的组件提供数据的方法。还有一个 useContext hook 促进了这一点。

如果您想亲自尝试此 API，Smashing Magazine 撰写了一篇 关于 React context 的入门文章。

类组件

尽管本教程没有提及它们，但可以使用 JavaScript 类 来构建 React 组件——这些被称为类组件。在 hooks 出现之前，类是将状态引入组件或管理渲染副作用的唯一方法。它们仍然是处理某些边缘情况的唯一方法，并且在旧版 React 项目中很常见。官方 React 文档保留了 Component 基类的参考，但建议使用 hooks 来管理 状态 和 副作用。

测试

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

路由

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

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

• 上一页
• 概述：JavaScript 框架和库
• 下一页