useContext():共享状态钩子
该钩子的作用是,在组件之间共享状态。关于Context这里不再赘述,其作用就是可以做状态的分发,在React16.X以后支持,避免了react逐层通过Props传递数据。
下面是一个例子,现在假设有A组件和B组件需要共享一个状态。
const App = () => {
const AppContext = React.createContext({})
const A =() => {
const { name } = useContext(AppContext)
return (
<>A组件的{name}</>
)
}
const B =() => {
const { name } = useContext(AppContext)
return (
<>B组件的{name}</>
)
}
return (
<AppContext.Provider value={{name: 'useContext测试'}}>
<A/>
<B/>
</AppContext.Provider>
)
}
export default App;