解释 React 中的新 Context API

React 是一个广泛用于创建用户界面的 JavaScript 库，它简化了单个组件的状态管理。然而，随着应用程序的扩展和复杂性的增加，在不依赖于大量的 props 传递的情况下，在深度嵌套的组件之间共享状态可能会遇到困难。这时，Context API 就成了一个有价值的工具。Context API 提供了一种无需在每个级别手动向下传递 props 的方式，即可轻松地将数据传递到组件树中。当多个组件需要访问共享数据时，例如用户的身份验证状态、主题或其他全局状态，它尤其有用。

Context API 主要由两个组件组成

• Provider： Provider 组件是其他组件可以利用的数据源。它封装了您希望共享数据的组件树的部分。
• Consumer： Consumer 组件使您可以访问和使用 Provider 提供的数据。您可以在 Provider 的任何后代组件中使用 Consumer。

为什么使用 Context API？

Context API 用于解决 React 应用程序中的几个关键问题：

Props 传递（Prop Drilling）

在 React 应用程序中，当您需要将数据向下传递多层组件时，您通常不得不通过那些实际上不使用数据的中间组件来传递 props。

Props 传递（将 props 手动通过多层组件传递）的做法可能导致代码难以维护和理解。Context API 提供了一种解决方案，通过一种更简洁、更有效的数据共享方式，从而消除了 props 传递带来的弊端。

Context API

现在，想象一下您有一种方式可以组织一次家庭会议，让每个人都可以共享信息，而无需通过中间人。在 React 中，Context API 正是做到了这一点。它就像组织一次家庭会议，让每个人都可以访问和更新共享信息。您创建一个“context”来保存这些信息，然后使用一个“Provider”将这些信息提供给所有家庭成员。不再需要通过每个人传递消息；现在，每个人都可以直接从会议中获取信息。

Context API 的工作原理

Context API 的操作涉及创建 context，使用 Provider 提供数据，以及使用 Consumer 消费数据。

以下是其工作原理的简述：

1. 创建 Context： 一切始于使用 `React.createContext()` 函数创建 context。此函数返回一个包含 Provider 和 Consumer 组件的对象。
2. 提供数据： Provider 组件起着关键作用。它封装了您组件树的特定部分，使该子树内的所有组件都能访问数据。它需要一个 `value` prop，其中包含您希望共享的数据。
3. 消费数据： 位于 Provider 包裹的子树中的组件可以使用 Consumer 组件来检索和利用 Provider 提供的数据。

Context API 相较于 Redux 的优势

Context API 因其简单性以及相较于另一个广泛使用的状态管理库 Redux 的一些优势，已成为 React 中状态管理解决方案的流行选择。

• 更少的样板代码： Context API 相比 Redux 需要的代码行数更少。使用 Redux，您通常需要创建 actions、action creators、reducers 和 connect 组件。Context API 简化了状态管理设置。
• 单向数据绑定： Context API 遵循单向数据绑定，这与 React 中数据的自然流动一致。这确保了数据更改以一种可预测且易于维护的方式进行。
• 多个 Store/Context： 虽然 Redux 通常只有一个 store，但 Context API 允许您在单个应用程序中创建多个 context。这种粒度的状态组织对于复杂应用程序非常有利，因为您可以更有效地管理不同类型的数据。

在 React 中实现 Context API

让我们深入了解如何在 React 应用程序中实现 Context API。我们将从使用 `create-react-app` 创建一个新的 React 应用程序开始，然后演示如何创建 context，提供数据，并在不同组件中消费这些数据。

步骤 1：创建 React 应用程序

如果您还没有设置 React 应用程序，可以使用 `create-react-app` 创建一个新的。导航到您的项目目录并运行以下命令：

步骤 2：创建 Context

在您的 React 应用程序中，创建一个名为 `Context.js` 的新文件来定义您的 context。在此示例中，我们将创建一个用户 context 来管理用户身份验证状态。

在此代码中，我们从 React 导入 `createContext` 并创建一个名为 `UserContext` 的新 context。

步骤 3：消费 Context

接下来，创建一个消费 context 中数据的组件。在此示例中，我们将创建一个名为 `WelcomePage` 的组件，该组件向用户显示欢迎消息。

在此代码中，我们导入之前创建的 `UserContext`，并使用 `UserContext.Consumer` 组件访问 context 提供的数据。`user` 变量包含来自 context 的数据，我们使用它来有条件地渲染欢迎消息。

步骤 4：向 Context 提供数据

要向 context 提供数据，您需要用 `UserContext.Provider` 组件包装您的应用程序。这可以在您的 `index.js` 文件或任何其他包含您希望使其数据可用的应用程序部分的顶级组件中完成。

在此代码中，我们创建一个 `user` 对象，该对象代表用户的身份验证状态和用户名。我们将 `App` 组件包装在 `UserContext.Provider` 中，并将 `user` 对象作为 `value` 提供。这使得 `UserContext.Provider` 子树内的所有组件都可以访问用户数据。

步骤 5：在组件中使用 Context

现在，context 已在 `index.js` 中提供，您可以在组件中使用它。例如，您可以在 `App.js` 组件中使用之前创建的 `WelcomePage` 组件，根据用户的身份验证状态显示欢迎消息。

在此代码中，我们导入 `WelcomePage` 组件并在 `App` 组件中渲染它。`WelcomePage` 组件将使用 `UserContext` 的数据根据用户的身份验证状态显示欢迎消息。

现在，当您使用 `npm start` 运行 React 应用程序时，您将在应用程序中看到一条欢迎消息，该消息基于通过 Context API 提供的数据。

示例：构建用户身份验证系统

让我们扩展前面的说明，创建一个基本的身份验证系统，使用 Context API。在此示例中，我们将演示如何启用用户登录和注销功能，并根据用户的身份验证状态显示不同的内容。

创建 Context

在 `Context.js` 中，我们将创建一个 `UserContext` 来管理用户身份验证状态。我们将提供一个初始状态，其中用户未进行身份验证。

用于管理身份验证的 Reducer

我们将使用一个 reducer 来管理身份验证状态。创建一个名为 `reducer.js` 的新文件来定义 reducer。

在此代码中，我们定义了一个 `userReducer` 函数，该函数处理用户登录和注销操作。

当用户进行身份验证时，组件将渲染个性化的欢迎消息和“注销”按钮。相反，当用户未进行身份验证时，它会显示访客欢迎消息并提供“登录”按钮。

提供 Reducer 和 State

在 `index.js` 中，我们将为 `UserContext` 提供 reducer 和初始状态。我们还将 dispatch 'LOGIN' action 以验证用户。

在此代码中，我们使用 `useReducer` hook 来创建初始状态和 reducer 函数。我们将 `userReducer` 和 `user` 对象传递给 `useReducer` hook。这使我们能够 dispatch actions 来修改 `App` 组件中的状态。

修改 App 中的身份验证状态

现在，让我们修改 `App.js` 组件以处理用户身份验证操作。我们将使用 `UserContext` dispatch actions 并根据用户的身份验证状态显示内容。

在提供的 React 应用程序中，我们使用 `useContext` hook 访问 `UserContext` 和 `dispatch` 函数，这使我们能够修改应用程序的状态。我们定义了两个关键函数：`handleLogin` 和 `handleLogout`。当调用 `handleLogin` 时，它会 dispatch 'LOGIN' action，模拟用户身份验证，用户名设置为 'JohnDoe'。相比之下，`handleLogout` dispatch 'LOGOUT' action 以注销用户。

在 `App` 组件中显示的内容是动态的，并且会根据用户的身份验证状态进行调整。当用户进行身份验证时，组件将渲染个性化的欢迎消息和“注销”按钮。当用户未进行身份验证时，它会显示访客欢迎消息以及“登录”按钮。

以下是展示如何使用 Context API 进行用户身份验证和基于用户状态的动态内容构建的完整 React 应用程序代码：

使用 `create-react-app` 或任何其他首选方法设置您的 React 应用程序。

创建必要的文件：`Context.js`、`reducer.js`、`index.js` 和 `App.js`。

Context.js (在此项目目录中创建此文件)

reducer.js (在此项目目录中创建此文件)

index.js (将您项目现有的 `index.js` 文件替换为此内容)

App.js (将您项目现有的 `App.js` 文件替换为此内容)

使用 `npm start` 运行您的 React 应用程序。您将看到一个身份验证示例正在运行。该应用程序允许您登录和注销用户，并根据其身份验证状态显示不同的内容。

在 `index.js` 文件中，我们使用 `useReducer` hook 为 `UserContext` 提供 reducer 和初始状态。初始状态表示一个未经验证的用户。

在 `App.js` 文件中，我们利用 `useContext` hook 访问 `UserContext` 和 `dispatch` 函数，这使我们能够修改应用程序的状态。

我们定义了两个函数：`handleLogin` 和 `handleLogout`。当调用 `handleLogin` 函数时，它会 dispatch 'LOGIN' action。此操作模拟用户身份验证，我们将用户名设置为 'JohnDoe'。

另一方面，当调用 `handleLogout` 函数时，它会触发 'LOGOUT' action，从而导致用户注销。在 `App` 组件中渲染的内容取决于用户的身份验证状态。如果用户已验证，则组件将显示自定义欢迎消息以及“注销”按钮。如果用户未经验证，它将显示访客欢迎消息并提供“登录”按钮。

运行 React 应用程序并使用 `npm start` 后，您可以与身份验证示例进行交互。单击“登录”按钮将使您以“JohnDoe”的身份登录，UI 将显示个性化的欢迎消息和“注销”按钮。当您单击“注销”按钮时，您将被注销，页面上的内容将更新以反映您现在是访客。这演示了应用程序如何根据用户的身份验证状态调整其内容。

输出

结论

React 中的 Context API 是一项强大的工具，可用于熟练地管理全局状态并促进组件之间数据的有效传输。它消除了 props 传递的必要性，并提供了一种优雅且简化的状态管理方法。通过将 Context API 与 reducer 结合使用，您无需像 Redux 这样的额外状态管理库即可构建复杂的状态管理系统。