关于react.js:react组件通信方式之图解父子组件通信和兄弟组件通信pubsubjs

问题形容

咱们晓得，react 组件通信形式有很多种，在我的项目开发中，咱们须要依据：我的项目复杂程度、业务具体性能、以及组件层级关系，去灵便抉择适合的通信形式。本文简述下父子组件和兄弟组件通信的罕用形式。至于别的 react 通信形式（Context、mobx、redux 什么的），后续会有对应文章再分类记录。

父子组件通信（父传子、子传父）

需要

假如咱们有这样的需要

• 点击按钮关上弹框（父传子）

  • 思路如下：
  • 子组件中有一个弹框（组件），父组件通过 props，将管制弹框是否弹出的标识传递给子组件
  • 子组件依据这个标识来管制是否关上弹框

• 敞开弹框后将点击敞开地位出现到页面上（子传父）

  • 思路如下：
  • 因为要辨别是点击勾销按钮还是点击确认按钮敞开的弹框（点击小叉号也是相当于点击勾销按钮）
  • 所以在子组件中通过调用父组件传来的函数，且传不同参的形式告知父组件点击的是那个敞开弹框的
  • 当然父组件要提前传递过去一个函数一边子组件可能调用

效果图

代码图示剖析

总结

• 父组件传递子组件数据，子组件在 props 中即可承受并应用
• 子组件传递父组件，须要父组件提前传一个函数给子组件，以便子组件在适当的时候，将子组件中的数据通过调用这个函数，再传递给父组件

兄弟组件通信之形式一 父组件直达（不举荐）

思路

• 因为兄弟组件间接是无奈间接通信的，所以就思考找一个中转站去通信。
• 因为兄弟组件都有一个独特的父组件，所以中转站就抉择父组件，同时数据也要对立寄存在父组件中。
• 所以本来 兄弟 A ===》兄弟 B 的数据流程就变成 兄弟 A ===》父组件 ===》兄弟 B ，即加了一层

需要

假如咱们有这样的需要

• 在纸质书本数组件（Toptop）中有一个按钮，点击让电子书本数（Bottombottom）加一
• 在电子书本数组件（Bottombottom）中也有一个按钮，对应点击让纸质书本数组件加一

效果图

代码图示剖析

总结

这种通过父组件做直达的形式不太不便，理论开发我的项目中，很少用这种办法，理解即可

兄弟组件通信之形式二 pubsub.js 音讯订阅公布（举荐）

值得一提的时候，vue 中也能够应用这个插件，因为这个插件是用原生 js 写的

需要

此案例的需要和下面的父组件直达案例相似，就是在一个组件中点击按钮，更改另一个组件的状态。咱们看一下效果图

效果图

代码图示剖析

第一步必定是要先下载 pubsub

npm install pubsub-js --save

npm 上的官网介绍：https://www.npmjs.com/package…

别忘了勾销订阅

留神上述案例中，理论写法不太欠缺，因为在组件挂载后 componentDidMount 钩子中订阅了音讯，所以当组件行将卸载的时候 componentWillUnmount 钩子中，还须要勾销这个事件订阅。简化代码如下：

// 组件挂载订阅音讯
componentDidMount() {this.token = PubSub.subscribe("wantAddOneFromPaper", (msg, data) => {// ...})
}

// 组件卸载勾销订阅音讯
componentWillUnmount() {PubSub.unsubscribe(this.token)
}

总结

这种公布订阅形式，是目前开发中比拟罕用的兄弟组件通信办法。当然其实 pubsub.js 不是说只能实用于兄弟组件通信，其实任意层级、任意关系的组件通信，都能够应用 pubsub 的公布订阅通信，性能很弱小的。