React 是现今前端开发领域最流行的框架之一，它的虚拟 DOM、组件化开发、数据驱动视图等特性使得开发效率和代码可维护性都大幅度提高。在一个 React 应用程序中，随着组件的增加和复杂度的提高，跨组件共享数据和状态变得越来越必要，而 React Context 在此时就显得尤为重要。在本文中，我们将会详细讨论如何使用 React Context 实现跨组件状态管理，并提供示例代码。
什么是 React Context？
React Context 是一个在组件之间共享数据的方法，它可以让我们避免手动层层传递 props，实现了更优雅的数据流管理。在 React 中，使用 Context 非常简单，它主要由三部分构成：
创建
Context对象：使用React.createContext函数创建一个新的 Context 对象，通常会将其存储于全局变量或类的静态属性中。提供者组件（Provider Component）: 使用
Context.Provider组件将数据传递给需要使用数据的组件，Provider 组件接受一个valueprop 作为数据提供给其子组件使用。消费者组件（Consumer Component）：当消费者组件在需要使用数据时，可以通过
Context.Consumer组件获取数据，Consumer 组件接受一个函数作为其子元素进行渲染，函数的参数即上文传递进来的数据。
值得注意的是，在消费者组件外层也可以使用 useContext 这个 React Hooks 来获取 Context 中的值。
如何使用 React Context 实现跨组件状态管理？
接下来我们将详细讲解如何使用 React Context 实现跨组件状态管理。我们以实现一个购物车组件为例。
- 创建
CartContext上下文
import { createContext } from "react";
const CartContext = createContext([]);
export default CartContext;在上面的代码中，我们创建了一个 CartContext 上下文，并使用 createContext 函数初始化了一个空数组作为数据的初始值。我们可以将这个 CartContext 存储在全局变量中，用于数据在跨级组件传递时使用。
- 添加 Provider 组件，用于高阶组件包装后原组件获得数据
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ----------- ---- ----------------
----- ------------ - ------- -- -
-- -------- -------- ----
----- ------ -------- - -------------
-- ----------
----- ---------------- - --------- -- -
----------------- ----------
--
-- -- -------- ------ ----- ----
------ -
---------------------
-------- ----- ----- ----------------- ---------------- --
-
----------------
-----------------------
--
--
------ ------- -------------在上面的代码中，我们创建了一个 CartProvider 组件，并使用 useState 函数实现一个空数组 cart 用于存储购物车中的商品，并定义了一个方法 addProductToCart 用于向购物车中添加商品。最后，我们使用 CartContext.Provider 来将 cart 变量和 addProductToCart 方法提供给子组件。
- 添加 Consumer 组件，用于获取数据
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- ----------------
----- ------------ - -- -- -
------ -
----------------------
---------- -- -
-----
------ ---- --------------------- ---------- -- --- ---------
----
--------------------------- ------ -- -
--- --------------------------
---
-----
------
--
-----------------------
--
--
------ ------- -------------在上面的代码中，我们创建了一个 ShoppingCart 组件，并在其中使用 CartContext.Consumer 组件来获取上下文中的数据。在这个例子中，我们获取了 cart 数组并展示了当前购物车中的商品总数，和购物车中的所有商品。
- 给需要使用的组件添加 CartContext.Provider 组件
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------ ---- -----------------
------ ------------ ---- -----------------
----- --- - -- -- -
------ -
--------------
------------- --
---------------
--
--
------ ------- ----在上面的代码中，我们使用 CartProvider 组件将 ShoppingCart 组件包装了一下，这样 ShoppingCart 组件就能通过 CartContext.Consumer 获取到全局上下文中的 cart 数组和 addProductToCart 方法了。
总结
在本文中，我们讲解了什么是 React Context，以及如何使用 React Context 实现跨组件状态管理的方法。我们最后以将 React Context 应用于购物车组件的案例进行实战讲解。使用 React Context 的好处是可以使得组件之间传递数据更加优雅、简化和高效，另外在使用它的时候也有一定的技巧，比如 Context 的提供和定义，及其数据传递方式。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652a58327d4982a6ebcadccc