PubSub.js消息的发布订阅
在react中, 进行组件中传递数据 :
* 可以使用 『props』 通过标签属性的方式, 从组件外部向组件内部传递数据, 将组件和数据解耦
* 进行父组件往子组件传递数据比较方便
* 进行兄弟组件之间传递数据, 只能把数据放到父组件中, 然后兄弟之间传递, 把方法写到父组件里面,然后通过标签的形式,往子组件传递
要是拆分组件传递数据 当嵌套层数比较多 就比较麻烦 , 所以建议使用PubSub.js
PubSub 发布订阅是一种设计模式, 简化代码解耦
组件间数据的传递方式消息的发布订阅，当嵌套层数比较多，可以用此工具库
1 下载: 2 npm i pubsub.js 或者 yarn add pubsub.js
1 简单demo 应该放在组件中使用,这里做个简单的测试 2 3 //引入 4 import PubSub from ‘pubsub-js‘; 5 6 //订阅一个频道 频道名称 频道名 数据 7 PubSub.subscribe(‘h5210510‘, (channel, data) => { 8 console.log(‘当前的频道名为:‘+channel); 9 console.log(‘当前收到的数据为:‘ + data); 10 }); 11 12 13 setTimeout(() => { 14 //发布消息 15 PubSub.publish(‘h5210510‘, ‘你好消息发布订阅‘); 16 }, 2000)
1 import React, { Component } from ‘react‘; 2 import PubSub from ‘pubsub-js‘; 3 4 export default class Show extends Component { 5 state = { 6 name: ‘‘ 7 } 8 //组件挂载完毕 组件将要被渲染的时候进行订阅 9 componentDidMount() { 10 //订阅 11 PubSub.subscribe(‘newName‘, (_, data) => { 12 this.setState({ 13 name: data 14 }) 15 }) 16 } 17 18 render() { 19 return ( 20 <div>{this.state.name}</div> 21 ) 22 } 23 }