react 组件间的通信方式

1. 父子组件间通信

父组件通过 props 把数据传给子组件

2. 子父组件间通信

2.1. 通过回调函数

子组件通过调用父组件传来的回调函数，可以将数据传给父组件

2.2. 通过 ref

3. 兄弟组件间通信

通过父组件作为中间层来实现数据互通，也就是把共同状态提升到父组件中

4. 跨层级通信

4.1. Context

• Context 可以共享那些对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言。

• 如果获取值和使用值的层级相隔很远，或者需要使用这个值的组件很多很分散，则可以使用 Context 来共享数据

，避免使用大量重复的 props 来传递值。

4.2. 发布订阅模式

• on()：负责注册事件的监听（订阅），指定事件触发（发布）时的回调函数
• emit()：负责触发事件，可以通过传参使其在触发的时候携带数据
• off()：负责监听器的删除（解除事件）

4.3. redux

当以上几种方式满足不了开发需求时，可以考虑引入 redux。

• redux 是 JavaScript 状态容器，提供可预测化的状态管理。
• 它可以集中式管理 react 应用中多个组件共享的状态。