【React进步系列】万能通信之发布订阅

使用场景

  • 任何组件之间想要通信.例如A组件想用B组件的方法,或者你希望有一个公共的全局都可以使用的订阅合集.

什么是发布-订阅模式?

发布-订阅模式是一种软件设计模式,其中发布者和订阅者之间存在一种松散的耦合关系。发布者负责发布(或广播)事件或消息,而订阅者则负责订阅并接收这些事件或消息。这样,发布者和订阅者之间不直接进行通信,而是通过一个称为事件总线(Event Bus)或消息队列(Message Queue)的中介来进行通信

如何在react中使用

1.首先,安装event-bus-hooks库:

npm install event-bus-hooks
or
yarn event-bus-hooks

2.订阅方法-通过hooks订阅 (推荐使用)

import {useEventBus} from 'event-bus-hooks';

const login = (user)=>{
	// 进行登录操作
	// 如果在方法中使用到了state,需要在订阅的时候把依赖项放到useEventBus第三个参数的数组中.这样回调函数拿到的值才是最新的.
}

// hooks 订阅 
useEventBus('Global/login',login,[依赖项]);

订阅方法-通过Bus手动订阅

import Bus from 'event-bus-hooks';

const login = (user)=>{
	// 进行登录操作
}

// Bus 订阅 
useEffect(() => {
    //订阅
    Bus.$on('Global/login',login);
    return ()=>{
      // 卸载时取消订阅,防止重复订阅.
      Bus.$off('Global/login');
    }
  }, [依赖项]);

3.在发布者组件中,发布事件:

import Bus from 'event-bus-hooks';

const loginClick = ()=>{
	const user = {
		account:'账号',
		password:'密码'
	}
	//发布 user为参数,可以是args方式传递.支持多个参数.订阅方法中按顺序接收
	Bus.$emit('Global/login',user);
}

结语

发布-订阅模式为React应用程序中的组件通信提供了一种灵活且解耦的机制。通过事件或消息队列,组件可以在不直接耦合的情况下进行通信。这种模式在处理复杂的应用程序结构或多个组件之间的交互时非常有用。

希望本篇博客对你理解并应用发布-订阅模式在React中实现组件通信有所帮助!

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: React 组件之间的通信可以使用发布-订阅者模式。这种模式提供了一种不直接对组件进行交互的方法。 在发布-订阅者模式中,组件之间不直接交互,而是通过一个中间的订阅者(也称为事件总线)进行通信。 以下是一个简单的例子: ``` // 创建一个事件总线 const EventBus = new EventEmitter(); // 组件 A 发布消息 function handleClick() { EventBus.emit("message", "Hello from A"); } function ComponentA() { return ( <button onClick={handleClick}> 发布消息 </button> ); } // 组件 B 订阅消息 function ComponentB() { const [message, setMessage] = useState(""); useEffect(() => { EventBus.on("message", setMessage); return () => { EventBus.off("message", setMessage); }; }, []); return <div>收到消息:{message}</div>; } function App() { return ( <div> <ComponentA /> <ComponentB /> </div> ); } ``` 在这个例子中,组件 A 发布一条消息,组件 B 订阅并显示消息。 ### 回答2: 一个例子可以是一个购物车的应用程序。在该应用程序中,有一个商品列表组件和一个购物车组件。 当用户点击商品列表中的某个商品时,商品列表组件会触发一个事件,通知其他组件某个商品被选中了。购物车组件订阅了这个事件,并根据收到的消息更新购物车的显示。 具体来说,商品列表组件内部可以定义一个事件发布者,当用户点击某个商品时,发布者会把该商品的信息发送给所有订阅者。购物车组件可以实现一个订阅者,它会监听商品列表组件的事件,并根据事件中的商品信息更新购物车的显示。 例如,当用户点击商品列表中的商品「苹果」时,商品列表组件就会触发一个事件,事件中包含了商品的信息。购物车组件订阅了这个事件,一旦收到事件,它会更新购物车中的内容,把「苹果」加入购物车。 这种发布订阅者模式的组件通信方式使得两个组件之间解耦,并且可以方便地添加更多的订阅者。例如,可以添加一个支付模块作为另一个订阅者,当购物车更新时,支付模块可以自动计算总金额并展示给用户。 这个例子展示了React组件之间通过发布订阅者模式进行通信的思路,提高了组件的复用性和可扩展性。 ### 回答3: React 组件之间的通信可以通过发布订阅者模式来实现。发布订阅者模式(PubSub)是一种广泛应用于软件设计的模式,它允许组件之间松耦合地进行通信,并且可以在需要的时候订阅和取消订阅消息。 举个例子来说明,假设我们有两个React组件:一个是发布者组件(Publisher),另一个是订阅者组件(Subscriber)。发布者组件发布一个事件,然后订阅者组件监听该事件,并在接收到事件后执行相应的操作。 在实际应用中,可以使用第三方库来实现发布订阅者模式,比如 PubSub.js。首先,我们需要在发布者组件中引入 PubSub.js,并在需要发布事件的地方调用`PubSub.publish()`方法,将事件名和相关数据作为参数传入。 ```jsx import React from 'react'; import PubSub from 'pubsub-js'; class Publisher extends React.Component { handleClick = () => { const data = { message: 'Hello, subscribers!' }; PubSub.publish('event', data); }; render() { return ( <button onClick={this.handleClick}> Publish Event </button> ); } } export default Publisher; ``` 然后,在订阅者组件中也引入 PubSub.js,并在需要订阅事件的地方调用`PubSub.subscribe()`方法,将事件名和对应的回调函数作为参数传入。 ```jsx import React from 'react'; import PubSub from 'pubsub-js'; class Subscriber extends React.Component { state = { message: '', }; componentDidMount() { this.token = PubSub.subscribe('event', this.handleEvent); } componentWillUnmount() { PubSub.unsubscribe(this.token); } handleEvent = (eventName, data) => { this.setState({ message: data.message }); }; render() { return ( <div> <p>{this.state.message}</p> </div> ); } } export default Subscriber; ``` 这样,在订阅者组件中,每当发布者组件发布事件时,订阅者组件就会收到事件,并将相应的消息显示在页面中。 通过使用发布订阅者模式,React 组件之间可以实现松耦合的通信,提高了组件的可复用性和可维护性。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值