接收一個(gè) context 對(duì)象(React.createContext 的返回值)并返回該 context 的當(dāng)前值翎嫡。當(dāng)前的 context 值由上層組件中距離當(dāng)前組件最近的 <MyContext.Provider> 的 value prop 決定。
當(dāng)組件上層最近的 <MyContext.Provider> 更新時(shí)唠叛,該 Hook 會(huì)觸發(fā)重渲染浪箭,并使用最新傳遞給 MyContext provider 的 context value 值控漠。
別忘記 useContext 的參數(shù)必須是 context 對(duì)象本身
import React, { useState ,,useContext, createContext} from 'react';
import './App.css';
// 創(chuàng)建一個(gè) context
const Context = createContext(0)
// 組件一, useContext 寫(xiě)法
function Item3 () {
const count = useContext(Context);
return (
<div>{ count }</div>
)
}
function App () {
const [ count, setCount ] = useState(0)
return (
<div>
點(diǎn)擊次數(shù): { count }
<button onClick={() => { setCount(count + 1)}}>點(diǎn)我</button>
<Context.Provider value={count}>
{/* <Item1></Item1>
<Item2></Item2> */}
<Item3></Item3>
</Context.Provider>
</div>
)
}
export default App;