官方文档写道:在组件的顶层调用 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
个人学习笔记📒