使用 React、Angular 和 WU 构建微前端
了解如何用 WU Framework 集成 React 与 Angular:Shell、适配器、通信和渐进迁移。另有 React/Vue 示例及 Svelte、Lit 绑定参考。
本指南以 React 和 Angular 为例讲解集成。若使用 Svelte、Stimulus 或其他已包含的技术,请查看完整适配器目录。WU 使用独立于框架的生命周期契约。
保留各自的框架,共享集成契约
一个页面可以同时承载 React 和 Angular 业务能力,无需将组件转换为同一种渲染器。每个应用保留自己的构建流程,Shell 提供容器,WU 协调生命周期。同样的方式也适用于渐进迁移:每次替换一项能力,并保留产品原有的访问路由。
这需要调整应用入口。对于控制整个文档的 SPA,仅把 URL 加入目录并不能完成集成。它必须挂载到收到的容器中,并在卸载时释放资源。
React:注册应用实际使用的渲染器
React 适配器接收根组件以及 React 和 ReactDOM 实例。请使用与应用构建相同的运行时;集成指南展示了显式传入运行时的注册方式,以及从 Astro 挂载的方法。
完整的入门路线是创建 React 应用、添加 Vue,然后共享计数器。最后一个示例包含源文件和 ZIP,可用于检查两个渲染器发起的数据更新,以及卸载时的清理行为。
Angular:选择正确的适配器
WU 为基于模块的应用、standalone 组件和 Angular Elements 提供不同的入口。请根据应用架构选择,而不是根据容器名称选择。
| Angular 应用 | WU API | 需要准备的内容 |
|---|---|---|
| 基于 NgModule | register |
根模块、平台和根选择器 |
| Standalone 组件 | registerStandalone |
组件、配置和 Angular 创建函数 |
| Angular Elements | registerElement |
Angular Elements 依赖和自定义元素名称 |
请在适配器参考中查看签名和选项。CLI 提供带构建配置和 standalone 注册的 Angular 模板:迁移现有应用前,先通过 CLI 模板了解它生成的文件。
Framework 4 支持 standalone 输入更新、无 Zone 挂载及使用 Zone.js 的应用。Keep-alive 暂停和恢复组件变更检测器。选项和已验证版本详见适配器矩阵。
React 与 Angular 之间的通信
将视觉状态保留在各渲染器内。通过 store 共享数据,通过事件传递事实,通过契约/RPC 执行操作。Framework 4 中微应用内的绑定使用该应用的 facade 和身份;请声明所需的权限申请及 grants。WU 挂载之外的 standalone 绑定可以使用全局运行时。
共享计数器和 RPC 求和服务示例使用 React 与 Vue 讲解契约。迁移到 Angular 时,保留契约,并按照 Angular 的生命周期调整订阅、视图更新和清理。
Vue、Svelte、Lit 及其他渲染器
该包还发布了 Vue、Svelte、Preact、Solid、Lit、Vanilla、Alpine、Qwik、Stencil、HTMX 和 Stimulus 适配器。Astro 和 Next 有 Shell 集成。适配器目录说明了它们的差异;模板文档区分了代码生成支持与各框架完整构建流程之间的范围。
迁移下一项能力前,请使用项目实际版本检查挂载、导航、样式、通信和卸载。通过生产指南检查发布资源;若应用为空白,请查看故障排查。