react当我们有两个完全不相关的组件想要通信时，就可以利用这种模式，其中一个组件负责订阅某个消息，而另一个元素则负责发送这个消息。使用Context配合

在nextjs项目中，发现两个组件没啥关系，例如一个是一直存在的头部组件，另一个是页面中的组件，当我点击头部组件中的特定按钮时，把数据传递到页面组件中，页面组件接受到canshu数据后在做其他操作，那么他们两个如何通讯，通过context配合观察者模式实现。

1. 首先在其共同的祖先组件中使用context
   下面的代码文件是根路由组件Layout.js
   其中children就是根据路由渲染的对应的页面

....
import {ConContext} from "../utils/test1";
import EventBus from "../utils/test";
const Layout = () => {
<ConContext.Provider value={EventBus()}>
      <Header />
        {children}
      <Footer></Footer>
      </ConContext.Provider> 

}
export default Layout

test1.js
创建context

import { createContext } from 'react';

export const ConContext = createContext(null);

test.js
使用 useEffect 包装下，否则会在服务端渲染，而服务端又没有浏览器对象，所以会报错，导致打包失败，下面代码中，注释的代码就会报找不到document，所以使用useEffect包装下创建了一个自定义hook勾子 useEvent，这个钩子创建一个变量用于接收EventBus这个类，为什么要在useEffect 创建EventBus呢，因为只有在useEffect中才能拿到浏览器对象，然后在返回变量。然后导出这个useEvent

"use client"
import {useEffect, useState} from 'react'
// 使用 useEffect 包装下，否则会在服务端渲染，而服务端又没有浏览器对象，所以会报错，导致打包失败
const useEvent = () => {
  const [val, setVal] = useState('')
  useEffect(() => {

    class EventBus {
      constructor() {
          this.bus = document.createElement('fakeelement');
      }

      addEventListener(event, callback) {
          this.bus.addEventListener(event, callback);
      }

      removeEventListener(event, callback) {
          this.bus.removeEventListener(event, callback);
      }

      dispatchEvent(event, detail = {}){
          this.bus.dispatchEvent(new CustomEvent(event, { detail }));
      }
    }
    setVal(new EventBus)
  },[])
  return val
}

export default useEvent


// "use client"
// class EventBus {
//   constructor() {
//       this.bus = document.createElement('fakeelement');
//   }

//   addEventListener(event, callback) {
//       this.bus.addEventListener(event, callback);
//   }

//   removeEventListener(event, callback) {
//       this.bus.removeEventListener(event, callback);
//   }

//   dispatchEvent(event, detail = {}){
//       this.bus.dispatchEvent(new CustomEvent(event, { detail }));
//   }
// }

// export default new EventBus

2. 在header中触发事件，
   header.js
   使用useContext接收数据

import React, {useState, useContext} from 'react';
const Header = () => {
const EventBus = useContext(ConContext)
// 点击按钮时触发
  const clickTab = (url) => {
    setOpenMenu(false)
    // 点击头部菜单切换轮播图开始
    // EventBus.dispatchEvent('myEvent', {log: 2})
    // 点击头部菜单切换轮播图结束
    push(url)
  }
}
export default Header

3. 在对应的页面组件中接收myEvent这个自定义事件

import React, { useEffect,useRef, useContext } from "react";
import { ConContext } from '../../utils/test1';
const Products = (props) => {
const EventBus = useContext(ConContext)
console.log(EventBus,'EventBus');
const slider = useRef();
const handleEvent = (e) => {
     slider.current.goTo(e.detail.log)
 }
useEffect(() => {
     EventBus.addEventListener('myEvent', handleEvent)
   }, [EventBus]);
}

export default Products;

参考：10种React组件之间通信的方法文章来源地址https://www.toymoban.com/news/detail-606635.html

到了这里，关于react当我们有两个完全不相关的组件想要通信时，就可以利用这种模式，其中一个组件负责订阅某个消息，而另一个元素则负责发送这个消息。使用Context配合的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！