React中模拟事件总线

最新推荐文章于 2024-08-06 10:11:25 发布

why_Because

最新推荐文章于 2024-08-06 10:11:25 发布

阅读量1.6k

点赞数

分类专栏：框架文章标签： react 事件总线 eventbus

本文链接：https://blog.csdn.net/qq_41287423/article/details/85330113

版权

本文介绍了在React中如何模拟Vue的EventBus概念，用于组件间的通信。通过使用node events模块，创建一个中间桥梁组件来注册和触发事件，以此实现Bigson组件中的按钮改变Smallson组件中age的效果。文章提供了具体的实现步骤，并强调了合理使用事件总线以避免代码维护困难的重要性。

摘要由CSDN通过智能技术生成

一、什么是事件总线？
EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的灾难，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。

但在React中没有EventBus的概念，可以通过 node events模块进行模拟

二、举例：通过Bigson组件中的一个按钮，来改变Smallson组件中的age,由16变为18
在这里插入图片描述

1、这是react模拟的事件总线

import React from 'react'
import Bigson from './Bigson'//引入Bigson组件
import Smallson from './Smallson'//引入Smallson组件

class Bus extends React.Component{
   
    render(){
   
        return (
            <div>
                <p>这是react模拟的事件总线</p>
                <hr/>