React应用中的消息订阅发布模式实践:PubSub库的应用

React应用中的消息订阅发布模式实践:PubSub库的应用

随着React应用的复杂性增加,组件之间的通信变得越来越重要。而消息订阅发布(PubSub)模式提供了一种简洁而灵活的方式来实现组件间的解耦通信。在这篇博客中,我们将探讨如何在React应用中使用PubSub库来实现消息订阅发布模式,以实现组件间的通信。

什么是消息订阅发布模式?

消息订阅发布模式是一种软件设计模式,用于实现组件之间的松耦合通信。在这种模式中,有一个中心化的消息通信系统,组件可以通过订阅和发布消息来进行通信,而不需要直接引用彼此。

在React中使用PubSub库

首先,我们需要安装PubSub库:

bash 复制代码
npm install pubsub-js

然后,让我们来看一个示例,展示如何在React应用中使用PubSub进行组件间的通信。

发布消息的组件(Search)

jsx 复制代码
// Search.jsx
import React, { Component } from 'react';
import PubSub from 'pubsub-js';

export default class Search extends Component {
  state = {
    keyword: '',
  }

  onChange = (e) => {
    this.setState({ keyword: e.target.value });
  }

  onSearch = () => {
    const { keyword } = this.state;
    PubSub.publish('searchKeywordChanged', keyword);
  }

  onKeyPress = (e) => {
    if (e.key === 'Enter') {
      this.onSearch();
    }
  }

  render() {
    return (
      <div className="input-group mb-3">
        <input
          type="text"
          className="form-control"
          placeholder="输入关键字"
          aria-label="Recipient's username"
          aria-describedby="basic-addon2"
          onChange={this.onChange}
          onKeyPress={this.onKeyPress}
        />
        <div className="input-group-append">
          <button
            className="btn btn-outline-secondary"
            type="button"
            onClick={this.onSearch}
          >
            搜索
          </button>
        </div>
      </div>
    )
  }
}

Search组件中,当用户输入关键字并按下回车或点击搜索按钮时,我们使用PubSub库的publish方法发布了一个名为searchKeywordChanged的主题,并传递了当前关键字作为参数。

订阅消息的组件(Users)

jsx 复制代码
// Users.jsx
import React, { Component } from 'react';
import axios from 'axios';
import PubSub from 'pubsub-js';

import User from '../User';

export default class Users extends Component {
  token = null

  state = {
    users: [],
  }

  componentDidMount() {
    // 默认先获取一次用户
    this.fetchUsers();
    this.token = PubSub.subscribe('searchKeywordChanged', (_, keyword) => {
      this.fetchUsers(keyword);
    });
  }

  componentWillUnmount() {
    PubSub.unsubscribe(this.token);
  }

  fetchUsers = async (keyword) => {
    const res = await axios.get(`/api/github/search/users?q=${keyword || 'h'}`);
    if (res && res.data) {
      this.setState({ users: res.data.items || [] });
    }
  }

  render() {
    const { users } = this.state;
    return (
      <div className="row row-cols-4 g-4">
        {users.map(user => <User key={user.node_id} user={user} />)}
      </div>
    )
  }
}

Users组件中,我们使用PubSub库的subscribe方法订阅了名为searchKeywordChanged的主题。当这个主题的消息被发布时,我们会触发回调函数,重新获取相应的用户信息并更新UI。

通过这种消息订阅发布的模式,我们可以实现组件之间的解耦,使得它们能够独立地进行通信,而不需要直接引用彼此。这样的设计模式有助于提高代码的可维护性和可扩展性,使得应用程序更易于理解和维护。

参考

相关推荐
优雅永不过时·1 小时前
Three.js 原生 实现 react-three-fiber drei 的 磨砂反射的效果
前端·javascript·react.js·webgl·threejs·three
老码沉思录9 小时前
React Native 全栈开发实战班 - 数据管理与状态之Zustand应用
javascript·react native·react.js
老码沉思录9 小时前
React Native 全栈开发实战班 :数据管理与状态之React Hooks 基础
javascript·react native·react.js
我认不到你9 小时前
antd proFromSelect 懒加载+模糊查询
前端·javascript·react.js·typescript
凹凸曼打不赢小怪兽12 小时前
react 受控组件和非受控组件
前端·javascript·react.js
鑫宝Code13 小时前
【React】状态管理之Redux
前端·react.js·前端框架
2401_8576100317 小时前
深入探索React合成事件(SyntheticEvent):跨浏览器的事件处理利器
前端·javascript·react.js
fighting ~18 小时前
react17安装html-react-parser运行报错记录
javascript·react.js·html
老码沉思录18 小时前
React Native 全栈开发实战班 - 列表与滚动视图
javascript·react native·react.js
老码沉思录19 小时前
React Native 全栈开发实战班 - 状态管理入门(Context API)
javascript·react native·react.js