本文主要是介绍React Hooks之useContext使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
官方文档写道：在组件的顶层调用 useContext 来读取和订阅 context。
我理解就是一个“全局变量”的概念。它可以用来声明一个变量，然后在各个组件中使用，避免了props一级一级往下传，当然使用场景有限，比如设置一个主题背景色，按钮样式定制…这种可以使用。
代码示例：
import { createContext } from 'react'// 创建一个Context对象，它本身不包含任何信息，它只代表你可以提供或从组件中读取的信息类型
// 'red' 是默认值 当没有Provider组件时会使用这个默认值
const { Provider, Consumer } = createContext('red')function ContextDemo() {return (/* Provider组件 将当前的value传递给以下组件如果value不写，默认是undefined*/<Provider value={'pink'}><Toolbar /></Provider>)
}function Toolbar() {return <ThemedButton />
}function ThemedButton() {/* Consumer消费组件 可以订阅到value的改变此处的theme就是往上查找最近的Provider组件提供的value值*/return <Consumer>{theme => <button style={{ background: theme }}>按钮颜色:{theme}</button>}</Consumer>}export default ContextDemo
个人学习笔记📒
这篇关于React Hooks之useContext使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
