React 上下文

Context 允许在组件树中传递数据，而无需在每一层手动传递 props。

在 React 应用程序中，我们通过 props 以自上而下的方式传递数据。 有时，对于 React 应用程序中许多组件需要的某些类型的 props 来说，这是不方便的。 Context 提供了一种在组件之间传递值的方法，而无需通过组件树的每一层显式传递 prop。

如何使用 Context

在 React 应用程序中使用 React context 主要有两个步骤

1. 设置 context provider 并定义要存储的数据。
2. 在需要存储数据时使用 context consumer

何时使用 Context

Context 用于共享可以被认为是 React 组件树的“全局”数据，并在需要时使用该数据，例如当前经过身份验证的用户、主题等。例如，在下面的代码片段中，我们手动将“theme” prop 传递到 Button 组件以设置样式。

在上面的代码中，Toolbar 函数组件接受一个额外的“theme” prop 并将其传递给 ThemedButton。 如果应用程序中的每个按钮都需要知道主题，这将变得不方便，因为它需要通过所有组件传递。 但是使用 context，我们可以避免为每个组件通过中间元素传递 props。

我们可以从下面的例子中理解它。 在这里，context 将一个值传递到组件树中，而无需通过每个组件显式地传递它。

React Context API

React Context API 是一种组件结构，允许我们在应用程序的所有级别共享数据。 Context API 的主要目标是解决 prop drilling（也称为“线程”）的问题。 React 中的 Context API 如下所示。

1. React.createContext
2. Context.provider
3. Context.Consumer
4. Class.contextType

React.createContext

它创建一个 context 对象。 当 React 渲染一个订阅此 context 对象的组件时，它将从组件树中匹配的 provider 读取当前的 context 值。

语法

当组件在组件树中没有匹配的 Provider 时，它会返回 defaultValue 参数。 这对于在不包装组件的情况下测试组件隔离（单独）非常有用。

Context.Provider

每个 Context 对象都有一个 Provider React 组件，允许 consuming 组件订阅 context 更改。 它充当交付服务。 当 consumer 组件请求某些东西时，它会在 context 中找到它并将其提供到需要的地方。

语法

它接受 value prop 并传递给此 Provider 的后代 consuming 组件。 我们可以将一个 Provider 连接到多个 consumers。 可以嵌套 Context Providers 以覆盖组件树中更深层次的值。 只要 Provider 的 value prop 发生更改，所有作为 Provider 后代的 consumers 都会重新渲染。 使用与 Object.is 算法相同的算法比较旧值和新值来确定更改。

Context.Consumer

它是订阅 context 更改的 React 组件。 它允许我们在函数组件中订阅 context。 它需要函数作为组件。 consumer 用于通过 provider 请求数据，并在 provider 允许时操作中心数据存储。

语法

函数组件接收当前的 context 值，然后返回一个 React 节点。 传递给该函数的 value 参数将等于组件树中此 context 的最近 Provider 的 value prop。 如果此 context 没有 Provider，则 value 参数将等于传递给 createContext() 的 defaultValue。

Class.contextType

类上的 contextType 属性用于分配由 React.createContext() 创建的 Context 对象。 它允许您使用 this.context 使用该 Context 类型的最近当前值。 我们可以在任何组件生命周期方法（包括 render 函数）中引用它。

注意: 我们只能使用此 API 订阅单个 context。 如果我们要使用实验性的公共类字段语法，我们可以使用静态类字段来初始化 contextType。

React Context API 示例

步骤 1 使用以下命令创建一个新的 React 应用程序。

步骤 2 使用以下命令安装 bootstrap CSS 框架。

步骤 3 将以下代码片段添加到 src/APP.js 文件中。

在上面的代码片段中，我们使用 React.createContext() 创建了 context，它返回 Context 对象。 之后，我们创建了包装器组件，它返回 Provider 组件，然后添加我们想要从中访问 context 的所有元素作为子元素。

输出

当我们运行 React 应用程序时，我们将获得以下屏幕。