在React中，我们通常使用props来向子组件传递数据。然而，在深度嵌套的组件树中，将数据传递给每个孙子级别的组件可能会变得很繁琐。当我们需要向所有子组件传递相同的数据时，这会变得更加困难。
这篇文章将介绍如何使用React Context来解决这个问题，并展示如何在React应用程序中实现“全局”数据。
什么是React Context？
React Context是React 16.3引入的新功能。它允许您将数据“广播”到整个组件树，而不需要通过props显式传递数据。
在Context中，我们可以定义一个Provider组件，该组件负责提供我们想要共享的数据。然后，我们可以在任何地方使用一个Consumer组件来访问该数据。
创建一个Context
首先，让我们创建一个新的Context来存储我们想要共享的数据。我们可以使用React.createContext方法来创建一个Context对象：
import { createContext } from 'react';
const GlobalDataContext = createContext();上面的代码将创建一个名为GlobalDataContext的Context对象。
创建Provider组件
接下来，我们需要创建一个Provider组件，该组件将提供我们想要共享的数据给所有子组件。我们可以创建一个高阶组件来封装Provider：
-- -------------------- ---- -------
------ - ------------- - ---- --------
----- ----------------- - ----------------
----- -------------- - ----------- -- -
----- ------------------ - ------- -- -
------ -
--------------------------- --------- ----- ----
---------- ---------- --
-----------------------------
--
--
------ -------------------
--上面的代码将创建一个名为withGlobalData的高阶组件，它接受一个组件作为参数，并返回一个新的组件（GlobalDataProvider）。GlobalDataProvider是一个包装了原始组件的Provider组件。
在GlobalDataProvider中，我们将共享的数据传递给GlobalDataContext.Provider组件的value prop。这样，所有子组件都可以使用该数据。
在应用程序中使用withGlobalData
现在，我们可以在我们的React应用程序中使用withGlobalData来提供全局数据。例如，在App组件中，我们可以使用withGlobalData来包装所有子组件：
-- -------------------- ---- -------
------ -------------- ---- -------------------
----- --- - -- -- -
------ -
----------------
--- ----- ---
-----------------
--
--
------ ------- ----所有子组件现在都可以通过Consumer组件来访问共享的数据：
import { useContext } from 'react';
import { GlobalDataContext } from './withGlobalData';
const MyComponent = () => {
const globalData = useContext(GlobalDataContext);
// 使用全局数据
};在上面的代码中，我们使用useContext hook来访问GlobalDataContext对象。此hook将返回在Provider组件中提供的共享数据。
示例
为了演示如何使用React Context来传递全局数据，假设我们有一个简单的Todo应用程序。该应用程序包含多个嵌套的组件，其中一些组件需要访问Todo列表数据。
首先，我们将创建一个名为TodoDataContext的Context对象，并定义一个名为TodoDataProvider的Provider组件：
-- -------------------- ---- -------
------ - ------------- - ---- --------
----- --------------- - ----------------
------ ----- ---------------- - -- -------- -- -- -
----- ------- --------- - -------------
------------ -- -
-- ------------
-- ----
------ -
------------------------- -------- ------ -------- ---
----------
---------------------------
--
--在TodoDataProvider中，我们使用useState hook定义一个todos状态以存储Todo列表数据。然后，我们使用useEffect hook来从API加载Todo数据并更新todos状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27875