React-组件

React 的核心特征是“数据驱动视图”,用公式表达为:UI = render(data)UI = f(data);

组件的四大通信

基于Props的单向数据流

既然 props 是组件的入参,那么组件之间通过修改对方的入参来完成数据通信就是天经地义的事情了。不过,这个“修改”也是有原则的——你必须确保所有操作都在“单向数据流”这个前提下。

所谓单向数据流,指的就是当前组件的 state 以 props 的形式流动时,只能流向组件树中比自己层级更低的组件。 比如在父-子组件这种嵌套关系中,只能由父组件传 props 给子组件,而不能反过来。
可以实现三种通信方式

  • 父子组件
  • 子父组件
  • 兄弟组件(父子 -> 子父)
    不适合进行多重传递

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

举例:

  • socket.io
  • Node中的EventEmitter
  • vue.js中的EventBus

优点:
监听事件的位置和触发事件的位置是不受限的

发布-订阅模型 API 设计思路
通过前面的讲解,不难看出发布-订阅模式中有两个关键的动作:事件的监听(订阅)和事件的触发(发布),这两个动作自然而然地对应着两个基本的 API 方法。

on():负责注册事件的监听器,指定事件触发时的回调函数。

emit():负责触发事件,可以通过传参使其在触发的时候携带数据 。

最后,只进不出总是不太合理的,我们还要考虑一个 off() 方法,必要的时候用它来删除用不到的监听器:

off():负责监听器的删除。