React--React中组件间的如何通信？

我们之前说过React是一个组件至上的技术栈，所以，组件之间的通信就是大家关注的话题。主要有以下几种：

父子组件

父子组件的传值通过props来实现。

var parent = () => {
    let name = "I'm Lee!"
    return (
        <div>
            <Child name="{name}"/>
        </div>
    )
}

var child = (props) => {
    return (
        <div>
            {
                props.name
            }
        <div>
    )
}

子父组件

子父组件的通信主要是通过callback来实现。

var parent = () => {
    const onChildClick = (item) => {
        console.log(item) //    点我
    }
    return (
        <div>
            <Child callback={onChildClick}/>
        </div>
    )
}

var child = props => {
    return (
        <div>
            <button onClick={ props.callback('点我') }>点我</button>
        </div>
    )
}

父孙组件

父孙组建有俩中方式：
1.以父子组件传值的方式，层层向下传递；
2.context上下文的方式：

const context = createContext()
var parent = () => {
    const [count, setCount] = useState(0)
    return (
        <div>
            <context.Provider value={ count }>
                <Child />
            </context.Provider>
        </div>
    )
}
var child = () => {
    return (
        <div>
            <Son />
        </div>
    )
}
var son = () => {
    return (
        <context.Consumer>
            {
                count => <p>{count}</p>
            }
        </context.Consumer>
    )
}

无关(兄弟)组件

非嵌套关系的组件通信主要有以下三种方式：
1.兄弟组件，可以通过找到共同的父组件，通过父子，子父组件的方式实现通信
2.可以通过redux, mobx, recoil等全局状态库来实现全局状态管理
3.可以通过自定义事件（发布订阅）