React 是一个流行的前端框架，其提供了多种方式来管理应用程序的状态。其中一种方式是使用 Context API，这是 React 16.3 版本引入的新功能。Context API 允许我们在组件之间共享数据，而无需通过 props 层层传递数据。
什么是 Context API？
Context API 是一种让组件树内部共享数据的方法，它能够使得父组件中的数据在子组件中直接被调用。Context 提供了一个全局可访问的数据源，避免了跨层级传递 props 的麻烦。
Context API 主要由两部分构成：Provider 和 Consumer。Provider 组件包裹着整个应用，并提供了一个 value 属性，该属性可以被所有的 Consumer 组件使用。Consumer 组件通过一个 render prop 函数来接收 Provider 提供的值。
如何使用 Context API？
下面，我们演示如何使用 Context API 管理一个简单的计数器：
创建一个 Context 对象
import React from 'react'; const CounterContext = React.createContext();
首先，我们需要创建一个 Context 对象。这可以通过调用 createContext() 方法来完成。
创建一个 Provider 组件
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- ---------------------- -
----- ------- --------- - ------------
------ -
------------------------ -------- ------ -------- ---
----------------
--------------------------
--
-接下来，我们创建一个 Provider 组件，并传递一个包含当前计数值和修改计数值的方法的 value 属性。
创建一个 Consumer 组件
-- -------------------- ---- -------
-------- ---------------- -
------ -
-------------------------
--- ----- -- -- -
----------- -------------
--
--------------------------
--
-
-------- --------------- -
------ -
-------------------------
--- ------ -------- -- -- -
------- ----------- -- -------------- - ----
----- --
---------
--
--------------------------
--
-最后，我们创建两个 Consumer 组件，一个用于显示当前计数值，另一个用于增加计数值。这里的 Consumer 组件使用了 render prop 函数，该函数接收 Provider 提供的数据并返回组件。
将 Provider 和 Consumer 组件组合起来
function App() {
return (
<CounterProvider>
<CounterDisplay />
<CounterButton />
</CounterProvider>
);
}现在，我们只需要将 Provider 组件包裹在需要访问共享状态的组件外面即可。这里，我们将 Provider 组件包裹在 App 组件内部，并将 CounterDisplay 和 CounterButton 组件作为其子组件。
总结
通过 Context API，我们可以轻松地实现跨层级的状态共享。它能够简化代码并提高应用程序的性能和可维护性。当然，我们也需要注意 Context API 的使用场景以及对应的最佳实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34086