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

个人学习笔记📒