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

个人学习笔记📒