在前端开发中，React 是一个非常受欢迎的 JavaScript 库，通过组件化的方式构建用户界面。React 的一个重要的概念是数据流动，可以通过 props 将数据从父组件流向子组件。但是，如果我们想在组件树的深层处访问上层组件的数据，传递 props 就会非常麻烦，这时候我们可以使用 React 提供的上下文（context）机制。
React 中的上下文机制可以帮助我们在组件树的任何位置共享数据，不需要在每个中间组件上通过 props 传递相同的数据。在本文中，我们将介绍一个 npm 包 react-context-consumer，它提供了一种简单的方式来订阅 context 中的数据。
安装
从 npm 安装 react-context-consumer：
npm install react-context-consumer
使用
创建上下文
首先，让我们创建一个简单的上下文来存储全局的主题：
import React from 'react';
export const ThemeContext = React.createContext('light');上面代码中，我们导出了一个名为 ThemeContext 的上下文，它的默认值为 'light'。我们可以在组件中引用该上下文：
-- -------------------- ---- -------
------ - ------------ - ---- -----------------
-------- ------------------- -
------ -
---- -------- ---------------- ----------- ---
---------------------------------
------
--
-
-------- -------------- -
------ -
-----
------------- -------------------------- ----------------
------------- -------------------------- ----------------
------
--
-上面代码中，我们通过 props 将主题的值传递到了 ThemedButton 组件中。但是，如果 Toolbar 组件的深度不断增加，每次都要传递相同的 props 就会非常麻烦。
订阅上下文
使用 react-context-consumer 可以简化上述问题。我们可以使用 Consumer 组件来订阅上下文中的值。
首先，我们需要将 ThemedButton 组件中的 props 删除，将其变成一个无状态的组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ - ---- -----------------
------ - -------- - ---- -------------------------
-------- -------------- -------- -- -
------ -
-----------------------
------ -- -
---- -------- ---------------- ----- ---
---------------------------
------
--
------------------------
--
-在上面代码中，我们将 ThemedButton 重构成了一个函数组件，并且将 ThemeContext.Consumer 组件作为其子元素。Consumer 组件接收一个函数作为其子元素，该函数接收当前的 context 值并返回一个 React 元素。这样，我们就不需要在 ThemedButton 组件中传递 theme props 了，而是直接在 Consumer 组件中访问了 ThemeContext 中的值。
现在我们可以在 Toolbar 组件中这样使用 ThemedButton 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ - ---- -----------------
------ ------------ ---- -----------------
-------- --------- -
------ -
-----
-------------------- ----------------
-------------------- ----------------
------
--
-总结
使用 react-context-consumer 可以让我们更方便地访问上下文中的值，避免了 props 的层层传递。同时，这个库也提供了很多其他的功能，如订阅和取消订阅上下文中的值的变化等。如果您对这样的功能有需求，可以查看其文档获取更多信息。
完整示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ - ---- -----------------
------ - -------- - ---- -------------------------
-------- -------------- -------- -- -
------ -
-----------------------
------ -- -
---- -------- ---------------- ----- ---
---------------------------
------
--
------------------------
--
-
-------- --------- -
------ -
-----
-------------------- ----------------
-------------------- ----------------
------
--
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067350890c4f7277583982