React的Hooks3——上下文useContext
- 上下文
- 全局变量是全局的上下文
- 上下文是局部的全局变量(Provider包着的地方可以访问)
- 使用方法
- 使用C = createContext(intial)创建上下文 使<C.Provider>圈定作用域
- 在作用域内使用useContext©来使用上下文
代码示例:
const Context = createContext(null)
function App(){
const [n,setN] = useState(0)
return (
<Context.Provider value={{n,setN}}>
<div className="App">
<h1>hello</h1>
<BaBa />
</div>
</Context.Provider>
)
}
function BaBa(){
return (
<div>我是爸爸<Child /></div>
)
}
function Child(){
const {n,setN} = useContext(Context)
const onClick = () => {
setN(n=>n+1)
}
return (
<div>我是儿子,我得到的n:{n}
<button onClick={onClick}>+1</button>
</div>
)
}