React组件通信解决方案

场景介绍

最近在做 react 开发的时候，需要在多级组件之间进行有效通信。这里所说的多级组件，可能是父子组件、兄弟组件，还可能是两个完全不相关的组件。

现代化状态管理预警

本文介绍的“全局发布-订阅（Event Bus）”模式在早期的 React 开发中非常流行。但在现代 React 架构中，由于它会打破 React 的单向数据流原则，导致状态流转难以追踪，通常被认为是反模式（Anti-Pattern）。 在现代开发中，对于跨级通信，首选 Context API；对于复杂的全局状态，首选 Zustand、Redux Toolkit 或 Jotai 等成熟的状态管理库。不过，了解 Event Bus 的手写实现，对于掌握原生 JavaScript 设计模式依然极具价值。

那么问题是：有没有一种方法可以统一实现组件之间的通信？不借助 redux 等第三方库，降低依赖性，保证代码简洁，还要保证通用性。

解决方案：订阅-发布模式

这里利用“订阅-发布模式”实现一个事件类：Event。它与 window.addEventListener  、 window.removeEventListener  类似。为了方便演示，Event 的实现放在文章最后，下面将展示在具体场景中的应用。

假设现在有 2 个 react 组件（A 与 B）需要进行通信，组件 A 用户点击后，组件 B 能接收到消息。

组件 A 的大致业务逻辑：

import React from 'react';
import Event from 'event-proxy';

const ComponentA: React.FC = () => {
  return (
    <div>
      {/*
        被点击的时候, 触发 click-event 事件
        注意: 被触发事件的名称, 需要由两个组件进行约定
      */}
      <button onClick={() => Event.trigger('click-event')}>
        点击发送消息
      </button>
    </div>
  );
};

export default ComponentA;

组件 B 的大致业务逻辑：

import React, { useEffect } from 'react';
import Event from 'event-proxy';

const ComponentB: React.FC = () => {
  useEffect(() => {
    const handleClick = () => {
      console.log('组件A被点击了');
    };

    // 组件挂载时，监听 click-event 事件
    Event.on('click-event', handleClick);

    // 组件卸载时，清理副作用，移除事件监听
    return () => {
      Event.remove('click-event', handleClick);
    };
  }, []);

  return <div>Component B (请查看控制台)</div>;
};

export default ComponentB;

贴代码实现

最后附上event-proxy.js代码的基本实现：

const cache = Symbol("cache");

class EventProxy {
  constructor() {
    this[cache] = {};
  }

  // 绑定事件key以及它的回调函数fn
  on(key, fn) {
    if (!Array.isArray(this[cache][key])) {
      this[cache][key] = [];
    }

    const fns = this[cache][key];
    if (typeof fn === "function" && !fns.includes(fn)) {
      fns.push(fn);
    }

    return this;
  }

  // 触发事件key的回调函数
  trigger(key) {
    const fns = this[cache][key] || [];
    for (let fn of fns) {
      fn(key);
    }

    return this;
  }

  // 移除事件key的回调函数fn
  remove(key, fn) {
    const fns = this[cache][key];

    if (!fns) {
      return this;
    }

    if (typeof fn !== "function") {
      this[cache][key] = null;
      return this;
    }

    for (let i = 0; i < fns.length; ++i) {
      if (fns[i] === fn) {
        fns.splice(i, 1);
        return this;
      }
    }
  }

  clear() {
    this[cache] = null;
    this[cache] = {};
  }
}

const event = new EventProxy();
export default event;

参考链接

• 设计模式手册之订阅-发布模式
• 淘宝前端团队：《React 组件通信》