React组件间的数据流动

所谓$\color{#FF3030}{单向数据流}$，指的就是当前组件的 state 以 props 的形式流动时，只能流向组件树中比$\color{#FF3030}{自己层级更低}$的组件。

听上去虽然限制重重，但用起来却是相当的灵活。基于 props 传参这种形式，我们可以轻松实现$\color{#FF3030}{父-子}$通信、$\color{#FF3030}{子-父}$通信和$\color{#FF3030}{兄弟}$组件通信。

① 父组件的 this.state.text 会发生变化，同时子组件读取到的 props.text 也会跟着发生变化

② 父组件传递给子组件的是一个绑定了自身上下文的函数

③ 将“兄弟 1 → 兄弟 2”之间的通信，转化为“兄弟 1 → 父组件”（子-父通信）、“父组件 → 兄弟 2”（父-子）通信两个步骤，把“兄弟”之间的新问题化解为“父子”之间的旧问题。

我们给出了 props 传参这种形式比较适合处理的$\color{#FF3030}{三种场景}$。尽管这并不意味着其他场景不能用 props 处理，但如果你试图用简单的 props 传递完成$\color{#FF3030}{更加复杂}$的通信需求，往往会得不偿失

层层传递的优点是非常简单，用已有知识就能解决，但问题是会浪费很多代码，非常烦琐，中间作为桥梁的组件会引入很多不属于自己的属性。短期来看，写代码的人会很痛苦；长期来看，整个项目的维护成本都会变得非常高昂。因此，层层传递 props 要不得。

利用“发布-订阅”模式驱动数据流

React 数据流管理方案中的前两个大方向：

使用基于 Props 的单向数据流串联父子、兄弟组件；

利用“发布-订阅”模式驱动 React 数据在任意组件间流动。

React 天然具备的全局通信方式“Context API”