React V6实现类似与vue的eventBus

这篇具有很好参考价值的文章主要介绍了React V6实现类似与vue的eventBus。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

功能背景

想要实现类似于vue的eventBus的功能,由一个组件通知其他一个或多个组件。应用场景:比如一个可视化大屏的界面,当筛选条件变化的时候,要同时通知到大屏中所有图表一起变化。(当然使用store也是可以的,eventbus就是相当于多了一个解决方案)

代码实现

eventBus.js

// eventbus.js
const eventBus = {};
const events = {};

eventBus.on = (eventName, callback) => {
  if (!events[eventName]) {
    events[eventName] = [];
  }
  events[eventName].push(callback);
};

eventBus.emit = (eventName, data) => {
  if (!events[eventName]) {
    return;
  }
  events[eventName].forEach((callback) => {
    callback(data);
  });
};

export default eventBus;

子组件

import { Button } from 'antd';
import React from 'react';
import { useEffect, useState,useRef } from 'react'
import eventBus from '@/utils/eventBus';

const SonComponent = ({ dialogVisible, updateVisible }) => {
  const _visible = {
    get() {
      return dialogVisible;
    },
    set(val) {
      //广播子组件的状态改变
      updateVisible && updateVisible(val);
    },
  };

  const ctrlChoosen = (event) => {
    _visible.set(event.target.checked);
  };
  const closeVisible = () => {
    _visible.set(false);
  };

  //这里实现eventBus的监听,监听父组件的传参
  useEffect(() => {
    eventBus.on('buttonClick', (val) => {
      //do some thing
      console.log('子组件监听到',val)
    });
    return () => {
      eventBus.off('buttonClick');
    };
  }, []);

  return (
    <div>
      <Button onClick={closeVisible}>子组件控制关闭</Button>
      <br></br>
      <input type="checkbox" checked={_visible.get()} onChange={ctrlChoosen} />
      <label>子组件状态{_visible.get()?'开':'关'}</label>
    </div>
  );
};

export default SonComponent;

父组件

import SonComponent from './Son'
import eventBus from '@/utils/eventBus';

<h1>父子组件eventBus交互</h1>
 <SonComponent dialogVisible={dialogVisible} updateVisible={subscribeVisible} />
      <Button onClick={()=>{eventBus.emit('buttonClick', true)}}>EVENTBUS父组件控制打开</Button>
实际效果

两个子组件均监听到了
React V6实现类似与vue的eventBus文章来源地址https://www.toymoban.com/news/detail-513892.html

到了这里,关于React V6实现类似与vue的eventBus的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包