React中组件通信有几种常见的情况:
1、父组件向子组件通信
父组件通过 props 向子组件传递需要的信息。
// 子组件: Child
const Child = props =>{
return <p>{props.name}</p>
}
// 父组件 Parent
const Parent = ()=>{
return <Child name="react"></Child>
}
2、子组件向父组件通信
props + 回调的方式传递需要想信息
// 子组件: Child
const Child = props =>{
const cb = msg =>{
return ()=>{
props.callback(msg)
}
}
return (
<button onClick={cb("你好!")}>你好</button>
)
}
// 父组件 Parent
class Parent extends Component {
callback(msg){
console.log(msg)
}
render(){
return <Child callback={this.callback.bind(this)}></Child>
}
}
3、跨级组件通信
(1)使用 props,利用中间组件层层传递,但是如果父组件结构较深,那么中间每一层组件都要去传递 props,增加了复杂度,并且这些 props 并不是中间组件自己需要的。(不推荐)
(2)使用 context,可以吧通信的内容放在 context 中,这样不管嵌套多深,都可以随意取用,对于跨越多层的全局数据可以使用 context 实现
// context方式实现跨级组件通信
// Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据
const BatteryContext = createContext();
// 子组件的子组件
class GrandChild extends Component {
render(){
return (
<BatteryContext.Consumer>
{
color => <h1 style={{"color":color}}>我是红色的:{color}</h1>
}
</BatteryContext.Consumer>
)
}
}
// 子组件
const Child = () =>{
return (
<GrandChild/>
)
}
// 父组件
class Parent extends Component {
state = {
color:"red"
}
render(){
const {color} = this.state
return (
<BatteryContext.Provider value={color}>
<Child></Child>
</BatteryContext.Provider>
)
}
}
4、非嵌套组件关系的通信
(1)可以使用自定义时间通信(发布订阅模式)
(2)可以通过 redux 等进行全局状态管理
(3)如果是兄弟组件通信,可以找到这两个兄弟节点共同的父节点,结合父子间通信方式进行通信。
总结:组件通信的方式有:
父组件向子组件通讯:父组件可以向子组件通过 props 的方式,向子组件进行通讯。
子组件向父组件通讯:props + 回调的方式,父组件向子组件传递 props 进行通讯,此 props 为作用域为父组件自身的函数,字组件调用该函数,将子组件想要传递的信息作为参数,传递到父组件的作用域中
跨层级通讯:context 设计的目的是为了共享那些对于一个组件树而言是“全局”的数据,对于跨越多层全局数据通过 context 通信再合适不过
发布订阅模式:发布者发布时间,订阅者监听时间并作出反应,我们可以通过引入 event 模式进行通信
全局状态管理工具:借助 Reudx 或者 Mobx 等全局管理工具进行通信,这种工具会维护一个全局状态中心 Store,并根据不同的事件产生新的状态