React 是一门优秀的前端开发框架，它提供了一种可组合的方式来构建组件。但是，有时候我们需要在组件之间共享数据，这通常需要用到 props。但是，当我们的组件层数很多时，props 的传递会变得很麻烦，这时候就需要一个更优雅的方式来共享数据，这就是 context。
什么是 context
context 是 React 提供的一种数据共享方式。它允许你在组件树中传递数据，而不需要一遍遍地手动传递 props。它的使用方式类似于全局变量，但是比全局变量更优雅和可控。
在 React 中使用 context
接下来我将来介绍如何在 React 中使用 context 实现组件数据的全局共享。
创建 context
使用 context 需要先创建一个 context 对象。可以使用 createContext 工厂函数来创建：
import React from 'react'; const MyContext = React.createContext();
这里我们创建了一个名为 MyContext 的 context 对象。
提供数据
我们需要提供数据，才能在组件树中共享它。可以使用 Provider 组件来提供数据：
<MyContext.Provider value={/* 这里写你需要共享的数据 */}>
{/* 这里放你需要共享数据的组件 */}
</MyContext.Provider>在上面的例子中，我们使用了 MyContext.Provider 组件来向组件树中的组件提供数据。我们将需要提供的数据通过 value 属性传递给 Provider 组件。
使用数据
在需要使用共享数据的组件中，可以使用 Consumer 组件来获取数据：
<MyContext.Consumer>
{value => /* 这里渲染组件，并使用 value */}
</MyContext.Consumer>在 Consumer 组件中，我们可以将提供的数据通过一个函数的参数传入组件，并在组件中使用它。
示例代码
让我们来实现一个简单的例子：一个可以更改主题颜色的组件。我们希望在整个应用程序中共享主题颜色，这样我们只需要在一个地方更改主题颜色即可，而不需要在每个组件中单独更改。
首先，我们需要创建一个 context 对象：
import React from 'react'; const ThemeContext = React.createContext();
然后，我们需要创建一个 Provider 组件来提供主题颜色的数据：
-- -------------------- ---- -------
----- ------------- ------- --------------- -
------------------ -
-------------
---------- - - ------ ------- --
---------------- - ----------------------------
-
------------- -
------------------- -- --
------ ----------- --- ------- - ------ - --------
----
-
-------- -
------ -
---------------------- -------- ------ ----------------- ------------ ---------------- ---
---------------------
------------------------
--
-
-在上面的代码中，我们创建了一个 ThemeProvider 组件，它提供了当前主题颜色和一个可以切换主题的函数。我们将这些数据通过 value 属性传递给了 ThemeContext.Provider 组件。
最后，我们需要编写一个使用主题颜色的组件：
-- -------------------- ---- -------
----- --- ------- --------------- -
-------- -
------ -
---------------
-----------------------
--- ------ ----------- -- -- -
---- --------------- -----------
--------- ------- -- ----- ---------
------- ---------------------------- --------------
------
--
------------------------
----------------
--
-
-在上面的代码中，我们使用了 ThemeContext.Consumer 组件来获取主题颜色和切换主题的函数，并在组件中使用它们。
完整的示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------------ - ----------------------
----- ------------- ------- --------------- -
------------------ -
-------------
---------- - - ------ ------- --
---------------- - ----------------------------
-
------------- -
------------------- -- --
------ ----------- --- ------- - ------ - --------
----
-
-------- -
------ -
---------------------- -------- ------ ----------------- ------------ ---------------- ---
---------------------
------------------------
--
-
-
----- --- ------- --------------- -
-------- -
------ -
---------------
-----------------------
--- ------ ----------- -- -- -
---- --------------- -----------
--------- ------- -- ----- ---------
------- ---------------------------- --------------
------
--
------------------------
----------------
--
-
-运行这个应用程序，你会发现当你点击按钮时，整个应用程序的颜色都会切换。
总结
使用 context，我们可以更方便地在 React 中共享数据。它允许我们在组件树中传递数据，而不需要通过 props 一遍遍地手动传递。这样可以使我们的组件更加的可复用、可扩展和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c0d9ce83d39b488153129d