React hooks 中的useContext()
useContext()可以实现组件之间的共享状态(通信) , 可以实现父子之间的通信,props也可以实现组件之间的共享状态
useContext用法:
react使用函数组件,两种用法的组件关系都是
export default function App() {
const AppContext = React.createContext({});
function Com1(){
return(
<Com3></Com3>
)
}
const Com2 = ()=>{
const {userName} = useContext(AppContext)
return(
<p>com2:{userName}</p>
)
}
const Com3 = ()=>{
const {userName} = useContext(AppContext)
return(
<p>com3:{userName}</p>
)
}
return(
<AppContext.Provider value={{userName:'hello'}}>
<div>
<Com1></Com1>
<Com2></Com2>
</div>
</AppContext.Provider>
)
}
- 首先,在父组件(App)中创建 const AppContext = React.createContext({}) —说父组件其实不太准确,因为可能是跨了很多层的,应该表述为,需要共享状态的组件的最外层
- 在需要共享状态的子组件外层加上 <AppContex.Provider value = {{userName:‘hello’}}> 子组件<AppContext.Provider>
- 下层组件如果内部需要引用这个状态的话,需要使用const {userName} = userContext(AppContext),这样就可以简单的得到上层组件定义的状态(值);
- 如果孙组件(com3),或者更下层组件想要引用这个状态的话,之间加上 const {userName} = useContex(AppContex)即可获得。不需要父组件的传输。
props的用法
export default function App() {
const name = 'hello'
const Com1 = (props)=>{
return(
<Com3
userName = {props.name}
/>
)
}
const Com2 = (props)=>{
const {userName} = props.name
return(
<p>com2:{userName}</p>
)
}
const Com3 = (props)=>{
const {userName} = props.name
return(
<p>com3:{userName}</p>
)
}
return(
<div>
<Com1
name = {name}
/>
<Com2
name = {name}
/>
</div>
)
}
- 引用子组件时,在子组件的内部加上需要传输的值。例如:<Com1 name='hello" />
- 定义子组件时加上props,const Com1 = (props) =>{}
- 子组件如何获取props的值 , const userName = props.name ;props.name里的name必须和引用子组件里传入的名字相同
- 如果Com3想要引用App里定义的name , 必须通过Com1,即:如果孙组件以及再下层组件想要引用最上层组件的状态,必须层层传输(即孙组件想要共享状态,必须经过父组件的传输)。
总结
- props和useContext都可以实现组件之间的共享状态
- props传输的值需要层层传输,即下层组件想要共享状态,必须是上层组件一个一个传下来的,不能跳级传。
- 使用useContext,无论有多少层子组件,他们都可以直接获取最上层定义的值,所以下层组件要共享状态无需通过上传组件的传输。
- 最后,如果在只有一层或两层的少量层数组件通信时,采用props是比较简单的方法,而当有多层组件,且有写组件用不到这个状态时,写useContext是比较好的方法。