微前端之间的反应上下文

React context between microfrontends

TLDR；如何在 React 微前端之间使用单个上下文？

应用程序被分成多个微前端或反应应用程序。这些中的每一个都在不同的端口上 运行。一个容器正在托管其他微前端。每个都是一个单独的 React 应用程序，它是一个运行时集成。 （我已经用martinfowler example实现了微前端）

目前正在通过 URL 和浏览器存储 (localStorage/cookies) 将一些数据传递给其他微前端。

我需要使用 React Context 在这些 React 应用程序 (MFE) 之间传递数据。

我已经在容器 (ReactApp1) 中定义了 ReactContext Provider 并存储了值（比如 color=black）。要在较低级别的微前端 (ReactApp2) 中访问此颜色，我们需要上下文可从任何微前端获得。如何让它可用？

（注意：我不想使用 localStorage 或 cookie 进行全球数据共享）

<Container>
  <LowerLevelMFE1/>
  <LowerLevelMFE2/>
  ...
</Container>

我认为 Micro-frontends 之间共享上下文是一种 anti-pattern，应该尽可能避免。如果您使用上下文共享数据，您将自动耦合依赖于上下文的 MFes，通过引入协调和依赖性来消除独立部署的好处。

我的建议是每个 micro-frontend 加载他们需要的数据，如果有通信需要它，你需要一个 api 或合同来处理这种通信。

我想如果你需要在 mfe 之间进行那种类型的交流，那么他们就错了。

正如鲁本所说，是一种反模式。

Webpack 5 的 Module Federation & ModuleFederationPlugin 是我发现实现此架构模式的最佳方式。

本质上，您创建了一个“主机”应用程序，将 React.context 包裹在“远程”组件周围。这个“远程”实际上是独立应用程序中的另一个组件，通过其 webpack 配置文件作为远程公开。在第二个应用程序中，您将使用 React.useContext.

正常使用上下文

您可以在 github 上找到此设置 here 的完整示例。

注意几点：

  1. 两个应用程序都需要使用此 Context 的源代码，因此最好将其移动到自己的包中。
  2. 您的上下文使用应用程序仍然需要，我在 MFE 中称之为“开发人员脚手架”。在这种情况下，这将是一个简单的组件，它将您的 <ContextConsumer /> 包装在您从我在 1 中提到的共享上下文包中导入的 <ContextProvider /> 中。
    • 请记住，这个带脚手架的应用程序仅公开 <ContextConsumer />，您需要确保在 webpack 配置中指定它。