React 数据流与组件间通信

单向数据流

React 是单向数据流，数据主要从父节点传递到子节点（通过 Props）。
如果顶层的某个 Props 改变了，React 就会重新渲染所有的相关子节点。

组件间通信

1. 父子组件通信
   在 React 中，最常见的组件通信就是父子了，一般：

   父组件更新组件状态 –> Prosp –> 子组件更新
   子组件更新父组件状态 –> 需要父组件传递回调函数 –> 子组件调用触发

2. 兄弟组件通信

   • 方式一：
     在两个组件处于同一级时（同处父级，或者同处子级），就称为兄弟组件
     。

     按照 React 单向数据流方式，我们需要借助父组件进行传递，通过 父组件回调函数 改变兄弟组件的 Props .

     其实这种实现方式与子组件更新父组件状态的方式是大同小异的。

   • 方式二：

     方式一只适用于组件层次很少的情况下，当组件层次很深的时候，整个通信的效率就会变得很低。

     React 官方给我们提供了一种上下文方式，可以让子组件直接访问祖先组件的数据或函数，无需从祖先组件一层层传递数据到子组件中。

     但这种方式建议按需使用，可能导致一些不可预期的错误（比如数据传递逻辑结构不清晰）。

本文借鉴Samo文章