React消息订阅与发布

父子组件之间的通信

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

消息订阅与发布

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

消息订阅与发布的基本思想:
需要数据的组件订阅消息,拥有数据的组件发布消息, 两者以共同的消息名来发送和获取数据。
在这里插入图片描述

PubSubJS

需要用到 PubSubJS包:https://github.com/mroderick/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.state
    return (
    <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>
    )
  }
}

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

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值