探索前端跨组件通信:EventBus在Vue和React中的应用

这篇具有很好参考价值的文章主要介绍了探索前端跨组件通信:EventBus在Vue和React中的应用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本文作者系360奇舞团前端开发工程师

EventBus 简介

事件总线(Event Bus)是一种用于组件间通信的模式,通常用于解决组件之间的解耦和简化通信的问题。在前端框架中,如 Vue.js,事件总线是一个常见的概念。基本上,事件总线是一个能够触发和监听事件的机制,使得组件能够在不直接依赖彼此的情况下进行通信。事件总线可以是一个全局的单例对象,也可以是一个基于发布-订阅模式的实现。

设计模式

在软件架构中,发布/订阅Publish–subscribe pattern)是一种消息范式,消息的发送者(称为发布者)不会将消息直接发送给特定的接收者(称为订阅者),而是将发布的消息分为不同的类别,无需了解哪些订阅者(如果存在)。同样,订阅者可以表达对一个或多个类别的兴趣,只接收感兴趣的消息,无需了解哪些发布者(如果存在)。探索前端跨组件通信:EventBus在Vue和React中的应用,前端,vue.js,react.js,javascript,ecmascript

订阅-发布模式(Publish-Subscribe Pattern)是一种软件设计模式,也属于行为型模式之一。它定义了一种对象间一对多的依赖关系,当一个对象的状态发生变化时,所有依赖于它的对象都会得到通知并自动更新。这种模式降低了对象之间的直接耦合,使得系统更加灵活。该模式包含两个主要角色:

  1. 发布者(Publisher): 负责发布(广播)消息或事件的对象。当发布者的状态发生变化时,它会通知所有已订阅的对象。

  2. 订阅者(Subscriber): 订阅发布者的消息或事件的对象。订阅者通过注册自己的回调函数(或观察者)来接收发布者的通知。

具体实现步骤如下:

  • 发布者维护一个订阅者列表(数组),用于存储所有订阅了它的对象。

  • 订阅者向发布者注册自己的回调函数(或观察者)。

  • 当发布者的状态发生变化时,它会遍历订阅者列表,调用每个订阅者的回调函数,通知它们状态的变化。

探索前端跨组件通信:EventBus在Vue和React中的应用,前端,vue.js,react.js,javascript,ecmascript
image.png

EventBus 在前端(Vue 中)的使用

  1. 创建事件总线:

javascriptCopy code
// event-bus.js

import Vue from 'vue';

// 创建一个新的Vue实例作为事件总线
const EventBus = new Vue();

// 导出该实例,以便在应用程序中的其他地方使用
export default EventBus;
  1. 组件 A:

<!-- ComponentA.vue -->

  <template>
    <div>
      <button @click="emitEvent">触发事件</button>
  </div>
  </template>

  <script>
  import EventBus from './event-bus.js';

export default {
  methods: {
    emitEvent() {
      // 使用事件总线触发名为 'custom-event' 的事件,并传递数据
      EventBus.$emit('custom-event', '这是传递的数据');
    }
  }
}
  </script>
  1. 组件 B:

<!-- ComponentB.vue -->

  <template>
    <div>
      <p>{{ eventData }}</p>
    </div>
  </template>

  <script>
  import EventBus from './event-bus.js';

export default {
  data() {
    return {
      eventData: ''
    };
  },
  mounted() {
    // 在组件创建时,通过事件总线监听 'custom-event' 事件
    EventBus.$on('custom-event', eventData => {
      // 更新组件的数据
      this.eventData = eventData;
      console.log('收到事件,数据为:', eventData);
    });
  }
}
  </script>

ComponentA组件通过点击按钮触发了一个名为 custom-event 的事件,并传递了一些数据。ComponentB组件在创建时通过事件总线监听了这个事件,并在事件发生时更新了组件的数据。注意:使用事件总线时需要注意组件的生命周期,确保在不再需要监听事件的组件被销毁时取消事件监听,以避免潜在的内存泄漏

  1. 销毁

beforeDestroy() {
    // 在组件销毁前取消事件监听
    EventBus.$off('custom-event', this.eventBusListener);
  }

EventBus 在前端(React 中)的使用

在 React 中,没有像 Vue 中的事件总线那样的直接内置机制。React 通常使用 props 和回调函数来实现组件之间的通信。然而,如果你的应用需要在不适用 props 传递的情况下进行全局事件的订阅和发布,可以使用第三方库,比如 eventemitter3 或者 Redux。以下是使用 Event Emitter 的一个简单示例:

  1. 安装 eventemitter3

npm install eventemitter3
  1. 创建全局的事件管理器

// eventBus.js

import { EventEmitter } from 'eventemitter3';

const eventBus = new EventEmitter();

export default eventBus;
  1. 引入这个事件总线订阅和发布事件:

// ComponentA.jsx

import React from 'react';
import eventBus from './eventBus';

class ComponentA extends React.Component {
  emitEvent = () => {
    eventBus.emit('custom-event', '这是传递的数据');
  };

  render() {
    return (
      <div>
        <button onClick={this.emitEvent}>触发事件</button>
      </div>
    );
  }
}

export default ComponentA;
// ComponentB.jsx

import React, { useState, useEffect } from 'react';
import eventBus from './eventBus';

const ComponentB = () => {
  const [eventData, setEventData] = useState('');

  useEffect(() => {
    const eventBusListener = (data) => {
      setEventData(data);
      console.log('收到事件,数据为:', data);
    };

    eventBus.on('custom-event', eventBusListener);

    return () => {
      // 在组件卸载时取消事件监听
      eventBus.off('custom-event', eventBusListener);
    };
  }, []);

  return (
    <div>
      <p>{eventData}</p>
    </div>
  );
};

export default ComponentB;
  1. 注意:在组件卸载**eventBus.off('custom-event', eventBusListener);**时取消事件监听以避免潜在的内存泄漏。

使用 EventBus 优缺点

优点:

  1. 解耦组件: 事件总线能够实现组件之间的解耦,使得它们不需要直接引用或依赖彼此,提高了代码的灵活性和可维护性。

  2. 简化通信: 对于一些简单的通信需求,事件总线提供了一种相对简单的方式,避免了通过 props 和回调函数传递数据时的繁琐操作。

  3. 全局通信: 事件总线通常是全局性的,能够在整个应用程序中的任何地方进行通信,适用于全局状态的传递和应用的整体控制。

  4. 跨组件通信: 事件总线可以方便地实现非父子组件之间的通信,而不需要在组件之间建立直接的关联。

缺点:

  1. 全局状态管理: 使用事件总线可能引入全局状态,导致应用状态变得难以追踪和理解,特别是在大型应用中。

  2. 难以调试: 全局性的事件监听和触发可能使得追踪代码执行流程和调试变得更加困难,尤其是在复杂的应用场景下。

  3. 潜在的性能问题: 大量的全局事件监听和触发可能导致性能问题,尤其是在频繁触发事件的情况下。

  4. 不明确的数据流向: 使用事件总线时,数据的流向相对不明确,可能增加代码的复杂性,使得应用程序的数据流变得更加难以理解。

  5. 安全性问题: 由于事件总线是全局的,可能存在安全风险,例如某个组件监听了不应该被其它组件触发的敏感事件。

总结

综合考虑,对于小型应用或简单的场景,事件总线是一个方便的工具。但在大型应用或需要更严格状态管理和调试的情况下,可能需要考虑使用更复杂的状态管理工具,如 Vuex 或 Redux。使用事件总线时,需要谨慎使用,避免滥用全局状态和事件。

- END -

关于奇舞团

奇舞团是 360 集团最大的大前端团队,代表集团参与 W3C 和 ECMA 会员(TC39)工作。奇舞团非常重视人才培养,有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择,并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。

探索前端跨组件通信:EventBus在Vue和React中的应用,前端,vue.js,react.js,javascript,ecmascript文章来源地址https://www.toymoban.com/news/detail-787269.html

到了这里,关于探索前端跨组件通信:EventBus在Vue和React中的应用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

原文地址:https://blog.csdn.net/qiwoo_weekly/article/details/135469786

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3探索——组件通信之事件总线

    Vue2.x使用EventBus进行组件通信,而Vue3.x推荐使用 mitt.js 。 比起Vue实例上的 EventBus , mitt.js 好在哪里呢?首先它足够小,仅有200bytes,其次支持全部事件的监听和批量移除,它还不依赖Vue实例,所以可以跨框架使用,React或者Vue,甚至jQuery项目都能使用同一套库。 使用yarn安装

    2024年02月12日
    浏览(7)
  • vue3探索——组件通信之依赖注入

    通常情况下,当我们需要从父组件向子组件传递数据时,会使用  props 。想象一下这样的结构:有一些多层级嵌套的组件,形成了一颗巨大的组件树,而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下,如果仅使用 props 则必须将其沿着组件链逐级传递

    2024年02月10日
    浏览(8)
  • 前端react入门day02-React中的事件绑定与组件

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 React中的事件绑定 React 基础事件绑定 使用事件对象参数  传递自定义参数  同时传递事件对象和自定义参数  React中的组件  组件是什么 React组件 useState  修改状态的规

    2024年02月06日
    浏览(11)
  • vue3探索——组件通信之v-model父子组件数据同步

    再很多场景中,我们可能想在子组件中修改父组件的数据,但事实上,vue不推荐我们这么做,因为数据的修改不容易溯源。 在vue2中,我们使用 .sync 修饰符+自定义事件 \\\'update:xxx\\\' ,来使父子组件数据同步。 这里不作过多说明,有需要请自行了解。 vue3的写法与vue2基本一致。最

    2024年02月11日
    浏览(5)
  • vue3探索——使用ref与$parent实现父子组件间通信

    在vue3中,可以使用vue3的API defineExpose() 函数结合 ref 或者 $parent ,实现父子组件数据的传递。 子组件:通过 defineExpose() 函数,向外暴露响应式数据或者方法 父组件:通过 ref 获取子组件实例,进而获取子组件暴露的响应式数据或方法 💡 你没看错!这里的 ref 就是经常用来定

    2024年02月10日
    浏览(4)
  • 【前端知识】React 基础巩固(三十四)——组件中的异步操作及优化

    通过组件的生命周期来完成网络请求,网络请求的异步代码直接放在组件中 通过redux来管理异步网络请求 在store中引入中间件 redux-thunk 构建 fetchHomeMultidataAction ,将原本在组件中的异步请求代码放入到actionCreators.js中 改写原来的category.jsx,派发异步请求的dispatch 查看运行结果

    2024年02月15日
    浏览(11)
  • 前端Vue入门-day04-用vue实现组件通信

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 组件的三大组成部分 注意点说明 组件的样式冲突 scoped data 是一个函数 组件通信 什么是组件通信 不同的组件关系 和 组件通信方案分类   父子通信流程图:  父 → 子

    2024年02月15日
    浏览(12)
  • Vue组件通信原理及应用场景解析

    2024年02月15日
    浏览(6)
  • 微前端使用qiankun实现,react主应用同时兼顾react,vue3,umi子应用

    理解 :我们可以简单理解为微前端是将一个项目拆分成多个模块,每个微前端模块可以由不同的团队进行管理,并可以自主选择框架,并且有自己的仓库,可以独立部署上线 应用场景 :1.当公司代码较老需要使用新的技术栈时我们可以使用微前端。2.多个团队同时开发时,每

    2024年02月09日
    浏览(23)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包