在 React 应用中，组件之间的数据通信是非常常见的需求，一般分为父子组件之间、兄弟组件之间和祖先后代组件之间。在 React 中，父子组件的数据传递通过 props 来完成，兄弟组件之间的数据交互可以通过父组件或者 Redux 等状态管理工具来实现。但是，祖先后代组件之间的数据传递就需要使用 React Context 来实现。
React Context 是什么？
React Context 是 React 提供的一种组件数据共享的方式，它可以让我们在不想通过 props 层层传递数据时，实现组件之间的数据共享。
React Context 如何使用？
在使用 React Context 之前，我们需要先创建一个 context。在 React 中，我们使用 createContext 函数来创建一个 context，例如：
import React from 'react'; const MyContext = React.createContext();
通过 createContext 创建的 context 实例包含了两个组件：Provider 和 Consumer。
Provider 组件：用于组件树中最顶层的组件中，并通过 value 属性来传递数据。Provider 中定义的数据可以被下面的子组件访问到。
Consumer 组件：可以订阅 context 的变化，从而获取到 Provider 中定义的数据。
注意：在 context 中，Provider 和 Consumer 组件必须成对出现，并且必须在同一个 context 中使用。
React Context 的示例应用
在下面的示例中，我们将创建一个 React 应用程序来展示如何使用 React Context 传递数据。
创建 context
首先，将创建一个 context。
import React from 'react'; const UserContext = React.createContext();
创建 Provider 组件
然后，创建一个 Provider 组件，它将要传递数据给 Consumer 组件。
-- -------------------- ---- ------- ----- ------------ ------- --------------- - ------------------ - ------------- ---------- - - ----- ------- ------ ------------------- -- - -------- - ------ - --------------------- ------------------- --------------------- ----------------------- -- - -展开代码
在上述 Provider 组件中，我们创建了一个对象来存储我们希望传递给 Consumer 组件的数据。然后，我们将其传递给 Provider 组件的 value 属性中。
创建 Consumer 组件
接下来，我们创建一个 Consumer 组件来消费传递给它的数据。
-- -------------------- ---- ------- ----- ----------- ------- --------------- - -------- - ------ - ---------------------- --- ----- ----- -- -- - ----- -------- ------------ -------- ---------- --------- ----------- ------ -- ----------------------- -- - -展开代码
在上述 Consumer 组件中，我们使用 Consumer 组件来订阅 context 中的数据变化，并显示在组件中。
将 Provider 和 Consumer 组件使用起来
现在，我们需要在应用的最顶层，即 App.js 文件中包括 Provider 组件，并在需要使用 Consumer 的组件中包括 Consumer 组件。
-- -------------------- ---- ------- ----- --- ------- --------------- - -------- - ------ - ----- -------------- ------------ -- --------------- ------ -- - -展开代码
在上述代码中，我们使用 UserProvider 包含 UserProfile 组件，由 UserProvider 组件传递 context 数据。
结语
通过 React Context，我们可以轻松地在祖先和后代组件之间传递数据。React Context 是一个有用的工具，它可以让我们的代码更整洁，更易维护。在使用它时，请确保遵循 React API 的最佳实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b8860b306f20b3a664f409
