在单页应用（Single Page Application，SPA）中，经常需要在多个组件之间共享数据，这时候我们可以使用 React 的 context。Context 提供了一种在组件树中传递数据的方法，避免了通过 props 层层传递数据的繁琐过程。
什么是 Context
Context 是 React 提供的一种跨组件传递数据的机制。通过创建 Context 对象，我们可以在组件树中任意位置读取数据，而不必一层层地将数据传递下去。
如何使用 Context
创建 Context 对象
我们可以使用 createContext 方法创建一个 Context 对象。这个方法接受一个默认值作为参数，这个默认值在整个组件树中都可以被访问到。
-- ---- ------- -- ----- --------- - ----------------------------------
在组件中使用 Context
在组件中使用 Context，需要使用 Context 对象的 Provider 组件提供数据，以及 Consumer 组件获取数据。
-- ------- ------------------- -------------- --------------- -- --------------------- -- ------- -------------------- ------ -- -- -- ----- --- ---------------------
在类组件中使用 Context
在类组件中使用 Context，需要使用 static contextType 属性来指定所需要的 Context 对象。
----- ------- ------- --------------- -
------ ----------- - ----------
-------- -
----- ----- - -------------
-- -- -----
-
-在函数组件中使用 Context
在函数组件中使用 Context，可以使用 useContext 钩子函数来获取 Context 对象。
-------- ------------- - ----- ----- - ---------------------- -- -- ----- -
使用 Context 实现全局存储
我们可以使用 Context 实现全局存储，将需要在多个组件中共享的数据存储在 Context 中。下面是一个示例代码：
-- ---- ------- --
----- ------------- - ------------------------
-- -------
-------- --------------------- -
----- ------ -------- - -------------
----- ----- - - ----- ------- --
------ ----------------------- ------------- ---------- ---
-
-- -------
-------- ----------- -
------ --------------------------
-
-- ------
-------- ------------- -
----- - ----- ------- - - ------------
------ -
-----
----------------------
------- ----------- -- --------- ----- ---- ----- ---------- -------------
------
--
-在这个示例代码中，我们创建了一个 GlobalContext 对象，用于存储全局数据。在 GlobalProvider 组件中，我们使用 useState 钩子函数来创建一个 state，将 state 中的数据存储在 Context 中。在 useGlobal 钩子函数中，我们使用 useContext 函数来获取 GlobalContext 对象。最后，在 MyComponent 组件中，我们使用 useGlobal 钩子函数获取全局数据，并使用 setData 函数来更新数据。
总结
使用 React 的 context，可以方便地在组件树中传递数据，避免了通过 props 层层传递数据的繁琐过程。我们可以使用 createContext 方法创建一个 Context 对象，使用 Provider 组件提供数据，使用 Consumer 组件获取数据。在类组件中，需要使用 static contextType 属性来指定所需要的 Context 对象，在函数组件中，可以使用 useContext 钩子函数来获取 Context 对象。我们可以使用 Context 实现全局存储，将需要在多个组件中共享的数据存储在 Context 中。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6600e666d10417a222c0bc53