什么是React-Context？
React-Context是React提供的一种全局状态管理解决方案。在传统的React组件中，通过props逐层传递数据，但这带来了很多不必要的代码和繁琐的过程。React-Context可以让我们在组件树中共享数据，减少组件之间的耦合度。
安装React-Context
React-Context是一个独立的npm包，所以我们需要先安装它。
npm install react-context --save
创建和使用Context
创建Context非常简单，只需要使用React.createContext函数即可。
import React from 'react'; const MyContext = React.createContext();
现在我们已经创建了一个Context，我们可以将其用于向下传递值。首先，让我们创建一个Provider组件，该组件将值放入Context。
function MyProvider(props) {
return (
<MyContext.Provider value={{ name: 'John', age: 30 }}>
{props.children}
</MyContext.Provider>
);
}在上面的代码中，我们为MyContext设置值为{name:'John',age:30}。接下来，我们使用Consumer组件从Context中获取值：
-- -------------------- ---- -------
-------- ------------- -
------ -
--------------------
------ -- -
-----
-------------------
------------------
------
--
---------------------
--
-在上面的代码中，我们使用了一个函数作为子元素，该函数将接收到的值渲染为React元素。此时，MyComponent组件可以访问到Context中的{name:'John', age:30}。
使用useContext钩子
React-Context还提供了一个useContext钩子，它可以更方便地从Context中获取值。
-- -------------------- ---- -------
------ - ---------- - ---- --------
-------- ------------- -
----- ----- - ----------------------
------ -
-----
-------------------
------------------
------
--
-如上面的代码所示，我们只需要传递Context对象作为useContext函数的参数，并且可以直接从返回的值中获取值。
示例
以下是一个完整的示例：
-- -------------------- ---- -------
------ ------ - -------------- ---------- - ---- --------
----- --------- - ----------------
-------- ----------------- -
------ -
------------------- -------- ----- ------- ---- -- ---
----------------
---------------------
--
-
-------- ------------- -
----- ----- - ----------------------
------ -
-----
-------------------
------------------
------
--
-
------ ------- -------- ----- -
------ -
------------
------------ --
-------------
--
-在上面的代码中，我们首先创建了一个名为MyContext的Context对象。然后，我们创建了一个MyProvider组件，该组件将值放入Context中。最后，我们使用MyComponent组件从Context中获取了值，并在页面上显示。
总结
React-Context可以帮助我们更方便地在组件之间共享数据。通过创建一个Context对象并将其用于向下传递值，我们可以减少组件间的耦合度，使代码更加简洁。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/56600