SOURCE

/*useContext 是 React 的一个 Hook，用于在不通过层层 props 传递的情况下，在组件树中向下共享数据。它的作用与使用场景：
1.通过 Context 在树中“广播”数据（如主题、语言、当前用户、权限、配置）给深层组件。
2.避免 props drilling（层层传 props）。
3.常与 useReducer 搭配，提供 state 和 dispatch 的全局/局部共享。*/
import {createContext,useContext} from 'react'

const ThemeContext = createContext("light")
export function BasicDemo() {
    const [theme, setTheme] = useState("light")
    const toggle = ()=> setTheme((t)=>(t==="light"?"dark":"light"))
    return (
        <div>
        <button onClick={toggle}>切换主题</button>
        <ThemeContext.Provider value={theme}>
        <DeepChild/>
        </ThemeContext.Provider>
        </div>
    )
}

function DeepChild() {
    return (
        <div style={{marginTop: 8,padding:8}}>
        <ThemeReader />
        </div>
    )
}

function ThemeReader() {
    const theme = useContext(ThemeContext)
    return <p>当前主题来自Context：{theme}</p>
}