【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中实现组件通信有所帮助！