React 是一个流行的 JavaScript 库，它为开发人员提供了构建用户界面的便利工具。在 React 中，数据流是单向的，即父组件通过 props 向子组件传递数据。然而，当组件层级很深时，这种传递数据的方式变得很麻烦。这时，Context API 可以帮助我们更方便地在组件之间共享数据。
什么是 Context API?
Context API 是 React 提供的一种组件间共享数据的方式。它可以让我们不必通过 props 层层传递数据，而是直接将数据传递给所有需要它的组件。Context API 包含两个组件：Provider 和 Consumer。Provider 组件提供了数据，而 Consumer 组件消费了数据。
如何使用 Context API?
在 React 中，使用 Context API 需要经过以下步骤：
创建一个 Context 对象
我们可以通过调用 React.createContext() 方法来创建一个 Context 对象。这个方法会返回一个对象，其中包含 Provider 和 Consumer 组件。
const MyContext = React.createContext()
在 Provider 组件中提供数据
我们可以通过将数据传递给 Provider 组件的 value 属性来提供数据。
<MyContext.Provider value={data}> // 子组件 </MyContext.Provider>在 Consumer 组件中消费数据
我们可以通过将 Consumer 组件嵌套在需要消费数据的组件中，并在 Consumer 组件中使用函数来访问数据。
<MyContext.Consumer> {data => ( // 使用数据 )} </MyContext.Consumer>
示例代码
下面是一个使用 Context API 的示例代码。在这个示例中，我们创建了一个 App 组件和两个子组件，其中一个子组件通过 props 接收数据，另一个子组件通过 Consumer 组件消费数据。
-- -------------------- ---- -------
------ ----- ---- -------
----- --------- - ---------------------
-------- ----- -
----- ---- - - ----- ------ ---- -- -
------ -
------------------- -------------
------- --
------- --
---------------------
-
-
-------- ------------- -
------ ------------ ----------------- --
-
-------- ------------------ -
------ -----------------------
-
-------- -------- -
------ -
--------------------
----- -- ------------ ----------- ---
---------------------
-
-
-------- ------------------ -
------ -
-----
----------------- -- ---------------- ----- ----
------
-
-
------ ------- ---在这个示例中，App 组件提供了数据，并将数据传递给 Child1 和 Child2 组件。Child1 组件通过 props 接收数据，并将数据传递给 Grandchild1 组件。Grandchild1 组件通过 props 接收数据，并在界面上显示数据。
Child2 组件通过 Consumer 组件消费数据，并将数据传递给 Grandchild2 组件。Grandchild2 组件通过 props 接收数据，并在界面上显示数据。
总结
Context API 是 React 提供的一种组件间共享数据的方式。通过 Context API，我们可以更方便地在组件之间共享数据，而不必通过 props 层层传递数据。在使用 Context API 时，我们需要创建一个 Context 对象，并在 Provider 组件中提供数据，在 Consumer 组件中消费数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d7e8831886fbafa459cfc9