使用 React Context 管理状态

1. 管理国家

2. 状态管理方式

上下文 API

结论

在我之前的文章中，我写了如何使用Redux 和 React进行状态管理。这篇博文将描述一种不同的方法——使用 Context 对象。

1. 管理国家

让我们首先定义一下它的含义——管理状态。

React 是一个使用 的框架，它components作为其构建块。组件包含一些数据，这些数据会在应用程序中被用户、事件或其他操作更改——这些数据就是state。

React 组件可以有状态（称为state-full）或没有状态（称为state-less）。

有状态的组件可以将其状态传递state给其他组件（从上到下），无状态的组件可以state通过 props 接收状态。传递和接收状态的方式就是状态管理。

2. 状态管理方式

如果应用程序小而简单，则几乎不需要状态管理。它可能只有一个主要组件来管理其他组件的状态。

但是当应用程序变得更大时，应用程序内的许多组件所需的某些类型的道具（例如语言环境偏好，UI 主题）应该通过甚至不需要它们的组件从上到下传递。

例如，考虑一个Page 组件，它将user和avatarSizeprop 向下传递几个级别，以便深度嵌套的Link和Avatar组件可以读取它：

从示例中可以清楚地看出，只有Avatar组件才需要user，avatarSize而且非常烦人：

• 你必须通过中间组件传递它们
• 每当Avatar需要任何额外数据时，它都应该再次经过多个级别......pffffttt。

有几种方法可以避免将道具传递到中间级别（所谓的“道具钻研”）：

• 使用组件组合（这是为了避免在多个级别之间传递少量的 props）
• 使用 Redux 库
• 使用 Context API
• 使用 useContext hook（在功能组件中）

本文是关于 Context API 的，所以让我们开始了解它是什么。

上下文 API

Context使我们能够在组件树中传递数据，而无需在每个层级手动传递 props。Context 共享的数据对于整个应用程序来说可以说是“全局”的。

但是，与Redux一样，这并不意味着你必须一直使用Context 。需要注意的是，它主要用于某些数据需要被不同嵌套级别的多个组件访问的情况。

1. 创建上下文

我们通过调用 React.createContext()创建我们的Context对象：

我们可以用默认值初始化Context或者将其留空：

2. 创建上下文提供者

每个Context对象都带有一个Provider React 组件，允许使用组件订阅上下文变化。

它提供了一个valueprop，用于传递给需要访问Context和 state 的组件。如果未提供该值，则将使用Context的默认值。

一旦我们创建了Context，我们就可以导入它并创建组件，它将初始化状态并进一步提供 MyContext ：

3. 使用 Context Provider

为了使Provider可供其他组件访问，我们需要用它来包装我们的主要应用程序或将使用上下文的应用程序部分。

在下面的示例中请注意，我们在 App 中渲染PersonList，它将渲染Person组件，而我们没有向它提供任何东西：

4. 创建上下文消费者

这是一个用于订阅Context变化的 React 组件。
它需要一个函数作为子函数。该函数接收当前Context 的值并返回一个 React 节点。value传递给该函数的参数将等value于此Context最接近的 Provider 的 prop。如果上述Context没有对应的 Provider ，则该value参数将等于defaultValue传递给 的createContext()。

在我们的示例应用程序中，我们创建了一个 Person 组件，将其包装到Consumer组件中，之后我们只能在这个特定组件中使用Context 。

我们使用Context 的方式与使用 props 的方式相同。它保存了我们在 MyProducer 中共享的所有值。

当我们研究 PersonList 时，使用Context的好处就变得显而易见了。我们不需要向它传递任何 props 或方法。我们将状态直接从顶层父组件（App）传递给需要此状态的组件（Persons_A）。这样一来，PersonList 就简化了：

结论

Context API让你能够拥有一个可从任何组件访问的中央存储。它还解决了props 钻取的问题。如果你一直使用Redux只是为了上述目的，那么你可以直接用Context替换它。在这种情况下，使用第三方库已经过时了。

要记住的事情：

1. 您不应该通过上下文来解决您遇到的每个状态共享问题。
2. 上下文不必对整个应用程序都是全局的，但可以应用于树的某个部分
3. 您的应用中可以有多个逻辑上分离的上下文。

如果您喜欢阅读我的博客，您可以请我喝咖啡！ :)