React消息订阅与发布

消息订阅与发布"/>

React消息订阅与发布

文章目录

• 父子组件之间的通信
• 消息订阅与发布
• • PubSubJS
  • 案例

父子组件之间的通信

父传子：利用props属性可以直接进行传递
子传父：父亲定义带参数的函数，传递给子组件，子组件调用该方法就可以在父组件获取子组件的参数。

消息订阅与发布

之前我们只会父子之间传递消息，所以两个兄弟组件之间传递消息的时候我们不得不使用父子组件通信的方式进行消息的传递，这样无疑是麻烦的。使用消息的订阅与发布机制可以实现兄弟组件之间的通信。

消息订阅与发布的基本思想：
需要数据的组件订阅消息，拥有数据的组件发布消息， 两者以共同的消息名来发送和获取数据。

PubSubJS

需要用到 PubSubJS包：
安装 ： npm i pubsub-js
引入： const PubSub = require('pubsub-js');
订阅和发布：

var mySubscriber = function (msg, data) {console.log( msg, data );
};
// 订阅（token是改订阅的唯一标识，当组件卸载的时候可以取消订阅PubSub.unsubscribe(token);）
var token = PubSub.subscribe('MY TOPIC', mySubscriber);// 发布
PubSub.publish('MY TOPIC', 'hello world!');
// 同步发布
PubSub.publishSync('MY TOPIC', 'hello world!');

案例

List 和 Search是兄弟组件现需要实现两组间之间的通信。
List需要获取数据，Search发布数据

List.jsx

import React, { Component } from 'react'
import PubSub from 'pubsub-js'
import './index.css'export default class index extends Component {state = {users: [],isFirst: true,isLoading: false,err:'',//请求相关的错误信息}componentDidMount() {this.token = PubSub.subscribe('updataListState', (_, data) => {// 第一个参数是消息名, 第二个参数才是数据this.setState(data)})}componentWillUnmount() {//取消订阅PubSub.unsubscribe(this.token);}render() {const {users, isFirst, isLoading, err} = this.statereturn (<div className="row">{isFirst ? <h2>欢迎使用，输入关键字点击搜索就可以出现用户信息</h2> :isLoading ? <h2>Loading......</h2> :err ? <h2 style={{color:'red'}}>{err}</h2> :users.map((user) => {return (<div className="card" key={user.id}><a href={user.html_url} target="_blank" rel="noreferrer"><img alt='avatar' src={user.avatar_url} style={{width: '100px'}}/></a><p className="card-text">{user.login}</p></div>)})}</div>)}
}

Search.jsx

import React, { Component } from 'react'
import axios from 'axios'
import PubSub from 'pubsub-js'export default class Search extends Component {search = () => {const {keyValueElement:{value: keyWord}} = this// 更新数据到List组件中（发布消息）PubSub.publish('updataListState', {isFirst:false,isLoading: false})axios.get(`api1/search/users?q=${keyWord}`).then(response => {PubSub.publish('updataListState', {isLoading: false, users: response.data.items})},error => {PubSub.publish('updataListState', {isLoading: false, err: error.message})})}render() {return (<section className="jumbotron"><h3 className="jumbotron-heading">Search Github Users</h3><div><input ref={currentNode => this.keyValueElement = currentNode}  type="text" placeholder="enter the name you search"/>&nbsp;<button onClick={this.search}>Search</button></div></section>)}
}

订阅与发布不仅仅适用于兄弟组件之间，而是适用于任意组件间通信的。