微前端通信利器：Qiankun的通信方法揭秘

2023-09-12 08:17:50

微前端通信：Qiankun 的三种强大方式

子应用通信

在微前端架构中，子应用之间需要相互交流信息和数据。Qiankun 提供了两种方法来实现子应用通信：

props 通信： 类似于组件通信，子应用可以通过 props 从父应用接收数据，也可以通过 props 将数据传递回父应用。这种方式适用于传递简单的值和设置。
ref 通信： 使用 ref，父应用可以访问子应用实例并直接调用其方法。ref 通信更加灵活，可以实现更复杂的数据交换和方法调用。

// 在子应用中使用 props 通信
const ChildApp = ({ data }) => {
  return <div>{data.message}</div>;
};

// 在父应用中使用 props 通信
import ChildApp from "./ChildApp";

const ParentApp = () => {
  const data = { message: "Hello from parent!" };
  return <ChildApp data={data} />;
};

// 在子应用中使用 ref 通信
import { useImperativeHandle, forwardRef } from "react";

const ChildApp = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    getData() {
      return "Data from child";
    },
  }));

  return <div>Child app</div>;
});

// 在父应用中使用 ref 通信
import ChildApp from "./ChildApp";

const ParentApp = () => {
  const ref = useRef();

  useEffect(() => {
    if (ref.current) {
      console.log(ref.current.getData());
    }
  }, [ref]);

  return <ChildApp ref={ref} />;
};

主应用通信

主应用与子应用之间的通信对于协调和管理子应用至关重要。Qiankun 提供了两种方法来实现主应用通信：

子应用注册通信： 子应用在注册到主应用时可以指定一个通信方法。主应用可以通过此方法向子应用发送消息。
消息总线通信： 主应用和子应用都可以将消息发布到消息总线上。其他应用可以通过订阅消息总线来接收这些消息。这种方式提供了更灵活且解耦的通信机制。

// 在子应用中使用注册通信
import { registerMicroApps } from "qiankun";

registerMicroApps([
  {
    name: "child-app",
    entry: "//localhost:3001",
    container: "#child-app",
    props: {
      message: "Hello from child app",
      // 自定义通信方法
      sendMsgToParent: (data) => {
        console.log(`Message from child: ${data}`);
      },
    },
  },
]);

// 在父应用中使用注册通信
import { registerMicroApps } from "qiankun";

registerMicroApps([
  {
    name: "child-app",
    entry: "//localhost:3001",
    container: "#child-app",
    props: {
      message: "Hello from parent app",
    },
  },
]);

// 在主应用中使用消息总线通信
import { registerMicroApps, useMessageListener } from "qiankun";

registerMicroApps([
  {
    name: "child-app",
    entry: "//localhost:3001",
    container: "#child-app",
  },
]);

useMessageListener("event-from-child", (event) => {
  console.log(`Received event from child: ${event.data}`);
});

// 在子应用中使用消息总线通信
import { registerMicroApps, useMessageListener, useMessageDispatch } from "qiankun";

registerMicroApps([
  {
    name: "child-app",
    entry: "//localhost:3001",
    container: "#child-app",
  },
]);

useMessageDispatch("event-to-parent", "Hello from child!");

事件总线通信

事件总线提供了一种简单而强大的机制，允许应用通过发布和订阅事件进行通信。Qiankun 支持两种事件总线通信方法：

子应用注册事件： 子应用在注册到主应用时可以指定一个事件名称。当此事件发生时，主应用和子应用都会收到事件通知。
应用订阅事件： 应用可以通过订阅事件总线上的事件来接收特定事件的通知。这种方式允许应用灵活地监听和响应事件。

// 在子应用中使用注册事件
import { registerMicroApps } from "qiankun";

registerMicroApps([
  {
    name: "child-app",
    entry: "//localhost:3001",
    container: "#child-app",
    // 注册事件
    events: {
      "event-from-parent": (event) => {
        console.log(`Received event from parent: ${event.data}`);
      },
    },
  },
]);

// 在父应用中使用注册事件
import { registerMicroApps } from "qiankun";

registerMicroApps([
  {
    name: "child-app",
    entry: "//localhost:3001",
    container: "#child-app",
    // 发布事件
    events: {
      "event-to-child": (data) => {
        console.log(`Sending event to child: ${data}`);
      },
    },
  },
]);

// 在应用中使用订阅事件
import { registerMicroApps, useMessageListener } from "qiankun";

registerMicroApps([
  {
    name: "child-app",
    entry: "//localhost:3001",
    container: "#child-app",
  },
]);

useMessageListener("event-from-child", (event) => {
  console.log(`Received event from child: ${event.data}`);
});