React 是一个非常流行的前端框架，它提供了一种易于管理和组织代码的方式。然而，当涉及到管理全局状态时，React 的默认解决方案可能会变得非常棘手。在这篇文章中，我们将介绍使用 React Context 的方法来管理全局状态。
什么是 React Context
React Context 是 React 提供的一种跨组件树传递数据的方法。它允许在不通过父组件的情况下，将数据传递给子组件。
React Context 的工作原理如下：当创建一个 Context 时，可以通过传递一个默认值来指定 Context 的初始状态。然后，通过 Context.Provider 将值传递给需要访问该值的组件。最后，在需要访问 Context 值的组件中，使用 Context.Consumer 来获取该值。
在 React 中使用 Context
要在 React 中使用 Context，需要遵循以下步骤：
首先，在需要使用 Context 的组件中，创建一个 Context：
import React from 'react';
const MyContext = React.createContext('default value');在上面的代码中，我们通过调用 React.createContext 方法创建了一个名为 MyContext 的 Context，并为该 Context 指定了一个默认值 'default value'。
接下来，我们需要在父组件中使用 MyContext.Provider 显示传递数据：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- ----------
----- --------- - ---------------------------- --------
-------- -------- -
------ -
------------------- ------------ ---- --------
------ --
---------------------
--
-在上面的代码中，我们通过 MyContext.Provider 来显式传递数据。在这里，我们将值 "hello from parent" 传递给了 Child 组件。
最后，在需要读取 Context 值的组件中使用 MyContext.Consumer 来获取该值：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- --------------
-------- ------- -
------ -
-----
--------------------
------ -- ---------------
---------------------
------
--
-在上面的代码中，我们使用了 MyContext.Consumer 来获取 Context 的值。在这里，我们将 value 传递给了一个 <p> 标签，该标签显示了来自父组件的文本值。
在 React 中使用 Context 管理全局状态
现在我们已经了解了如何在 React 中使用 Context。接下来，我们将介绍如何使用它来管理全局状态。
首先，我们需要创建一个包含全局状态的 Context：
-- -------------------- ---- ------- ------ ----- ---- -------- ----- ------------------ - --------------------- ----- ----- ----------- ------ ---------- ---- --- ------ ------- -------------------
在上面的代码中，我们创建了一个名为 GlobalStateContext 的 Context，并将一个对象作为其默认值传递。该对象包含三个属性：user、isLoggedIn 和 authToken。它们可以描述你应用程序的某些全局状态。
下一步是在应用程序的根组件中使用 GlobalStateContext.Provider 来传递全局状态：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------------ ---- -----------------------
------ --------- ---- --------------
-------- ----- -
-- ----------------- --------
----- ------------- --------------- - ----------------
----- -----
----------- ------
---------- ----
---
------ -
---------------------------- -------------------- -----------------
---------- --
------------------------------
--
-
------ ------- ----在上面的代码中，我们使用了 React.useState 方法来创建一个名为 globalState 的状态，我们将它作为 <GlobalStateContext.Provider> 的值传递。
在AppRouter中的任何组件都可以使用Context值：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------------ ---- -----------------------
-------- ---------- -
----- ------------- --------------- - -------------------------------------
------ -
-----
----------- ----------------------- -- --- ----- ----------
------
--
-
------ ------- ---------在上面的代码中，我们使用了 React.useContext 方法来获取 globalState 和 setGlobalState。然后我们在一个标题中显示了 globalState.user.name。
现在，当我们更改全局状态时，所有使用相同 Context 的组件都将接收到新的值。
结论
在本文中，我们介绍了如何在 React 中使用 Context 管理全局状态。我们了解了如何创建和使用 Context，并进行了一些示例。通过将全局状态集中存储在一个共享 Context 中，我们可以避免一些 React 中常见的跨组件传递状态的问题，这使我们的代码更简洁，易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f3a014f40ec5a964e3c1bf