React Context 是 React 官方提供的全局状态管理方案，它可以让我们在不需要向子组件层层传递 props 的情况下，实现全局状态的管理和共享。这对于大型的前端应用来说特别有用，因为它可以帮我们有效地管理和协调应用中的各种状态。
为什么需要全局状态管理？
在 React 应用中，常常需要在多个组件之间共享状态，比如用户登录状态、应用主题、语言设置等等。传统的方法是将这些状态向下传递到需要的子组件中，但这样会造成很多冗余代码，还有可能会导致组件之间的耦合度过高。
为了解决这些问题，我们可以使用全局状态管理来实现状态的共享。这个方案还可以帮我们在整个应用程序中保持一致性，并且能够更好地协调组件之间的交互。
如何使用 React Context？
在 React Context 中，我们需要通过一个 Provider 和一个或多个 Consumer 来实现状态的共享。Provider 是状态的提供者，它包装了应用中的一部分组件，并且通过它的 value 属性来提供状态。而 Consumer 则是状态的消费者，它可以订阅 Provider 提供的状态，并在需要的时候使用。
创建全局状态管理器
首先，我们需要创建一个全局状态管理器。这个管理器可以是一个独立的组件，也可以是一个 React Context 对象。我们可以通过 React.createContext 方法来创建一个 Context 对象。
import React from "react"; const MyContext = React.createContext();
定义 Provider 组件
接下来，我们需要定义一个 Provider 组件来提供状态。这个组件应该包含需要共享状态的子组件，并且接受一个 value 属性来提供状态。这个属性的值应该是一个对象，包含了需要共享的状态。
-- -------------------- ---- -------
------ ----- ---- --------
----- --------- - ----------------------
-------- ----------------- -
----- ------- --------- - ----------------
---------- --
------------- -------
---
------ -
------------------- -------- ------ -------- ---
----------------
---------------------
--
-在这个例子中，我们定义了一个 MyProvider 组件，并将它传递给了 MyContext.Provider。我们在这个组件中定义了一些状态，并将它们作为 value 属性传递给了 MyContext.Provider。这样，在 MyProvider 组件的子组件中就能够访问到这些状态。
订阅 Provider 中的状态
现在，我们已经定义了一个可以提供全局状态的 Provider 组件。接下来，我们需要在子组件中订阅这些状态。
首先，我们需要从 MyContext 中导入一个 Consumer 组件。这个组件可以接受一个函数作为子组件，这个函数可以订阅 Provider 提供的状态。
-- -------------------- ---- -------
------ - --------- - ---- ---------------
-------- ------------- -
------ -
--------------------
--- ------ -------- -- -- -
-----
------------------------
------
-----------
--------------------------
------------- --
---------- --------- ------------- -------------- --
-
--
------
--
---------------------
--
-在这个例子中，我们导入了 MyContext，并在 MyComponent 中使用了 MyContext.Consumer 来订阅 provideer 提供的状态。Consumer 的 value 属性是一个函数，它接受从 Provider 提供的状态，并返回 React 元素。在这个例子中，我们使用了解构赋值来获取状态，然后将这些状态渲染在了页面上。
当状态发生改变时，我们也可以通过 Consumer 中传递的 setState 函数来修改状态。这个函数接受一个新的状态值，并将它更新到 Provider 中。
使用 useContext 简化代码
虽然使用 React Context 提供了一种有效的方法来管理全局状态，但在总体上，它的使用方式还是比较繁琐和冗长的。每次订阅 Provider 中的状态都需要使用一个 Consumer 组件，并将状态传递给从 Provider 中传递的函数。这样的代码结构可能会造成不必要的麻烦。
为了简化代码，我们可以使用 useContext 钩子函数。useContext 函数可以让我们在组件中订阅 Provider 提供的状态，而无需使用 Consumer 组件。
-- -------------------- ---- -------
------ ------ - ---------- - ---- --------
------ - --------- - ---- ---------------
-------- ------------- -
----- - ------ -------- - - ----------------------
------ -
-----
------------------------
------
-----------
--------------------------
------------- --
---------- --------- ------------- -------------- --
-
--
------
--
-在这个例子中，我们使用了 useContext 钩子函数来订阅 Provider 提供的状态。useContext 函数需要传递一个 React Context 对象，用来提供需要订阅的状态。它会返回我们需要的状态和 setState 函数。
使用 useContext 钩子函数可以极大地简化代码结构，并让状态管理更加容易和直观。
总结
在这篇文章中，我们学习了如何使用 React Context 实现全局状态管理。我们了解了什么是全局状态管理，以及为什么需要使用它。我们还讨论了如何创建 Provider 组件来提供状态，以及如何订阅 Provider 中的状态。
最后，我们介绍了 useContext 钩子函数，它可以帮助我们简化代码结构，让全局状态管理更加容易和直观。使用 React Context 可以使得状态管理更加高效，并且可以在大型应用程序中提供更好的协调。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6517e8be95b1f8cacd00f4e4