选自React进阶实践指南 https://juejin.cn/book/6945998773818490884

React 一共有 5 种主流的通信方式：

props 和 callback 方式
ref 方式。
React-redux 或 React-mobx 状态管理方式。
context 上下文方式。
event bus 事件总线。

1. props和callback方式

props和callback可以作为React组件最基本的通信方式，父组件可以通过props将信息传递给子组件，子组件可以通过执行props中的回调函数callback来触发父组件的方法，实现父与子的消息通讯。

父组件->通过自身state改变，重新渲染，传递props->通知子组件
子组件->通过调用父组件props方法->通知父组件

/* 子组件 */
function Son(props){
    const {  fatherSay , sayFather  } = props
    return <div className='son' >
         我是子组件
        <div> 父组件对我说：{ fatherSay } </div>
        <input placeholder="我对父组件说" onChange={ (e)=>sayFather(e.target.value) }   />
    </div>
}

/* 父组件 */
function Father(){
    const [ childSay , setChildSay ] = useState('')
    const [ fatherSay , setFatherSay ] = useState('')
    return <div className="box father" >
        我是父组件
       <div> 子组件对我说：{ childSay } </div>
       <input placeholder="我对子组件说" onChange={ (e)=>setFatherSay(e.target.value) }   />
       <Son fatherSay={fatherSay}  sayFather={ setChildSay }  />
    </div>
}

event bus事件总线

当然利用 eventBus 也可以实现组件通信，但是在 React 中并不提倡用这种方式，我还是更提倡用 props 方式通信。如果说非要用 eventBus，我觉得它更适合用 React 做基础构建的小程序，比如 Taro。接下来将上述 demo 通过 eventBus 方式进行改造。