在开发前端应用程序时，我们通常需要在多个组件之间共享数据。在 React 中，有多种方式可以实现状态共享，如 React Context、Redux、MobX 等。本文重点介绍 React 中如何使用 React Context 对全局状态进行管理。
React Context 简介
React Context 是 React 提供的一种数据共享方案，它可以让我们在组件树中共享数据，而不需要一层一层地通过 props 传递。使用 React Context，我们可以实现以下目标：
- 多个组件可以共享相同数据
- 子组件可以修改共享状态
- 祖先组件可以提供一个默认状态
使用 React Context 的好处是可以减少 props 的传递，同时方便地对全局数据进行管理和修改。
创建 React Context
在 React 中，我们可以通过 createContext 函数来创建一个新的 Context 对象。代码如下：
const GlobalContext = React.createContext();
在上面的代码中，我们创建了一个名为 GlobalContext 的新的 Context 对象。我们可以使用这个对象在组件之间传递数据。
提供默认值
当我们创建 Context 对象时，可以通过 Provider 组件为其提供一个默认值。这个默认值将会被传递给任何子组件，除非它们自己通过 Consumer 组件来覆盖它。代码如下：
-- -------------------- ---- -------
----- ------------- - --------------------- ------ - ---
-------- ----- -
------ -
----------------------- -------- ------ -- ---
-------- --
-------------------------
--
-
-------- --------- -
----- - ----- - - --------------------------------
------ -------------------
-在上面的代码中，我们为 GlobalContext 创建了一个默认值 { count: 0 }。在 App 组件中，我们通过 Provider 组件提供了一个新的值 { count: 10 }。在 Counter 组件中，我们通过 useContext 钩子获取了 GlobalContext 的值并输出了其中的 count 属性。
消费 Context 值
当我们需要在组件中使用 GlobalContext 的值时，可以通过 useContext 钩子来获取。代码如下：
function Counter() {
const { count } = React.useContext(GlobalContext);
return <div>{count}</div>;
}在上面的代码中，我们使用 useContext 钩子获取了 GlobalContext 的值，并解构出了其中的 count 属性。
修改 Context 值
在我们提供了一个默认值后，我们可以在任何需要修改 GlobalContext 的地方，通过 Provider 组件的 value 属性来重新赋值。代码如下：
-- -------------------- ---- -------
-------- ----- -
----- ------- --------- - ------------------
------ -
----------------------- -------- ------ -------- ---
-------- --
------- ----------- -- -------------- - ----------------
-------------------------
--
-
-------- --------- -
----- - ----- - - --------------------------------
------ -------------------
-在上面的代码中，我们为 GlobalContext 提供了一个名为 setCount 的修改方法。在 App 组件中，我们使用 useState 钩子创建了一个名为 count 的状态，并将其作为 GlobalContext 的值传递。在 Counter 组件中，我们通过 useContext 钩子获取了 GlobalContext 的值，并输出了其中的 count 属性。在 App 组件中，我们使用一个按钮来修改 count 值。
示例代码
完整示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------------- - --------------------- ------ - ---
-------- ----- -
----- ------- --------- - ------------------
------ -
----------------------- -------- ------ -------- ---
-------- --
------- ----------- -- -------------- - ----------------
-------------------------
--
-
-------- --------- -
----- - ----- - - --------------------------------
------ -------------------
-总结
在 React 中使用 Context 来管理全局状态是一种非常便利的方案。通过提供默认值和使用 useContext 钩子，我们可以方便地在多个组件之间共享数据，并且在组件树中任何地方都可以修改这个数据。在实际开发中，我们需要根据具体情况来选择使用 React Context 还是其他状态管理方案，以满足项目需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f749ccf6b2d6eab3fc6ac6