React Hook-useContext() 使用指南
useContext hook是什么？
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
useContext hook是什么？
useContext 提供了一种在组件树（子组件）中传递数据的方法，而无需在每一层手动向下传递 props。
让我们通过这个流程图来理解。
假设用户名可以直接传递到 A、B、D 级，但要传递到嵌套级别，我们必须通过中间级别传递，也就是说，如果我们想将其传递到 G 级，我们必须将其作为属性传递到其 D、E、F 级，然后它才会到达 G 级。
因此，为了避免将 prop 传递到每个中间层，我们使用 useContext hook。
如何使用 useContext hook
这里我将考虑流程图App
D
E
F的最右侧部分。
目标是将用户名作为 prop 从 App 组件传递到 F 组件并读取它。
让我们了解如何将数据从 App 组件传递到 F 组件。
使用 useContext Hook 时需要记住以下三个步骤：
1. 创建上下文；
2. 为上下文提供一个值，并且提供该值的组件必须包裹子组件
；
3. 最后一步是使用上下文值。
为此，首先需要创建上下文，为此您必须导入 createContext 并对其进行初始化，然后从应用程序组件导出上下文。
App.js 代码
import React,{createContext } from "react";
import ComponentC from "./components/ComponentC";
export const UserContext = createContext();
注意：我们导出 UserContext 是为了
以后可以将其导入到嵌套组件中。
现在，有了 UserContext，我们就可以在组件周围封装一个提供程序，然后在任何子组件中使用该属性。所以，我们将把提供程序设置在我们需要的位置，并向其传递一个属性。
import React,{createContext } from "react";
import ComponentC from "./components/ComponentC";
export const UserContext = createContext();
export default function App() {
Let user=”johny”;
return (
<div className="App">
<UserContext.Provider value={user}>
<ComponentC/>
</UserContext.Provider>
</div>
);
}
请注意，现在我们不再将用户属性发送到 Profile 组件，而是通过 value={user} 将其发送到 UserContext 提供程序。然后，我们可以在任何嵌套组件中获取该值。
第三步也是最后一步，是在组件 F 中直接使用，而不将其传递给中间组件 D 和 E。useContext
将返回我们传递给 UserContext.Provider 的值：value={user}
import {UserContext} from '../App'
import React,{useContext} from "react"
function ComponentF(){
const user=useContext(UserContext);
return(
<div>
Hello!! {user}
</div>
);
}
export default ComponentF;
现在，你们可能想知道，如果我们有多个上下文值需要通过嵌套组件传递，该怎么办？
让我们来详细分析一下。
我们将创建另一个名为 ChannelContext 的上下文。
export const ChannelContext=createContext();
将此上下文提供程序包装在初始上下文提供程序中
<UserContext.Provider value={'Hello'}>
<ChannelContext.Provider value={'world'}>
<ComponentC/>
</ChannelContext.Provider>
</UserContext.Provider>
以下是 App.js 文件中的完整代码。
1.)App.js
import React,{createContext } from "react";
import ComponentC from "./components/ComponentC";
export const UserContext=createContext();
export const ChannelContext=createContext();
export default function App() {
return (
<div className="App">
<UserContext.Provider value={'Hello'}>
<ChannelContext.Provider value={'world'}>
<ComponentC/>
</ChannelContext.Provider>
</UserContext.Provider>
</div>
);
}
2.) 现在，我们可以将根组件中创建的上下文导入到任何嵌套组件中。为此，请导入 useContext hook。
import React,{useContext} from "react"
ComponentF.js
import {UserContext,ChannelContext} from '../App'
import React,{useContext} from "react"
function ComponentF(){
const user=useContext(UserContext);
const channel=useContext(ChannelContext);
return(
<div>
{user}-{channel}
</div>
);
}
export default ComponentF;
要查看完整的代码源代码，请点击此链接
(codeSandBox=> https://codesandbox.io/s/usecontext-react-hook-4ejrj5?file=/src/index.js )
我相信你已经清楚 useContext Hook 的概念，并且了解了它的强大之处。此外，它还可以与 useState Hook 结合使用，比单独使用 useState 更轻松地在深层嵌套组件之间共享状态。
点击以下链接了解更多信息：[链接]
如果你读到这里，请给这篇文章点个赞❤️，并关注我以获取更多类似内容。
文章来源：https://dev.to/srishtikprasad/guide-to-react-hook-usecontext-3lp7