React解密：React组件通信的方式有哪些？

随着react,vue，angular，组件化思想的深化，组件通信一直以来都是开发的重要内容。那么我们就来说说react组件的通信方式有哪些？

组件通信的类别：

1、父子组件

2、子父组件

3、子孙组件

4、无关组件

父子组件通信：props

const Child = (props) => {
    return (
        <div>我的原色是：{{props.color}}</div>
    )
}
const Parent = () => {
    let color = 'red'
    return (
        <Child color={color}/>
    )
}

子父组件通信：props + callback

const Child = (props) => {
    const handleClick = （value）{
        props.cb(value)
    }
    return (
        <div onClick={handleClick('lee的前端技术栈')}>我的原色是：{{props.color}}</div>
    )
}
const Parent = () => {
    let callback = (value) {
        console.log(value) //    lee的全端技术栈
    }
    return (
        <Child cb={this.callback.bind(this)}/>
    )
}

子孙组件：子孙组件就是在父组件中套用子组件，子组件中又套用子组件，具有多层次的组件嵌套，而最深的子组件数据的唯一来源可能是最上面的父组件，那么这样的组件通信应该有俩中方法：

（1）当作是父子组件，通过props的方式层层传递数据，这样的问题就在于，中间组件并不需要这些数组，但是还需要帮着层层向下传递，方式可以见父子组件通信。

（2）第二中方式就是通过context的方式处理，这是一个比较好的方式。context相当于是一个大容器，我们可以把要通信的内容放入到这个容器中，这样就可以做到不管嵌套多少层都可以随意取用。对于跨多层级组件通信是一个非常好的方式。

const context = createContext()
const Sun = () => {
    return (
        <context.Consumer>
            <div>我的颜色是：{color}</div>
        </context.Consumer>
    )
}
const Child = () => {
    return (
        <Sun/>
    )
}
const Parent = () => {
    let color = 'red'
    return (
        <contex.Provider value={color}>
            <Child />
        </contex.Provider>
    )
}

无关组件通信：无关组件包括兄弟组件，也包括不在同一个层级的组件等，可以采用的方式有，

• 可以采用自定义事件通信（发布订阅方式）
• 可以采用redux的方式通信
• 如果是兄弟组件，可以采用将数据传入到父级在传入到兄弟中去

这些就是react组件通信的方式。。。