React 数据流与组件间通信

单向数据流

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

组件间通信

  1. 父子组件通信
    React 中,最常见的组件通信就是父子了,一般:

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

    父子组件通信示例 . codepen

  2. 兄弟组件通信

    • 方式一:
      在两个组件处于同一级时(同处父级,或者同处子级),就称为兄弟组件

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

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

    • 方式二:

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

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

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

本文借鉴Samo文章


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!