# 使用 React、Angular 和 WU 构建微前端

了解如何用 WU Framework 集成 React 与 Angular：Shell、适配器、通信和渐进迁移。另有 React/Vue 示例及 Svelte、Lit 绑定参考。

本指南以 React 和 Angular 为例讲解集成。若使用 Svelte、Stimulus 或其他已包含的技术，请查看[完整适配器目录](/zh-cn/docs/framework/api-adapters/)。WU 使用独立于框架的生命周期契约。

<span id="conservar-cada-framework-y-compartir-un-contrato"></span>

<span class="section-anchor" id="section-1"></span>

## 保留各自的框架，共享集成契约

一个页面可以同时承载 React 和 Angular 业务能力，无需将组件转换为同一种渲染器。每个应用保留自己的构建流程，Shell 提供容器，WU 协调生命周期。同样的方式也适用于渐进迁移：每次替换一项能力，并保留产品原有的访问路由。

这需要调整应用入口。对于控制整个文档的 SPA，仅把 URL 加入目录并不能完成集成。它必须挂载到收到的容器中，并在卸载时释放资源。

<span id="react-registrar-el-renderer-que-usa-tu-aplicación"></span>

<span class="section-anchor" id="section-2"></span>

## React：注册应用实际使用的渲染器

React 适配器接收根组件以及 React 和 ReactDOM 实例。请使用与应用构建相同的运行时；[集成指南](/zh-cn/docs/framework/integrations/)展示了显式传入运行时的注册方式，以及从 Astro 挂载的方法。

完整的入门路线是[创建 React 应用](/zh-cn/docs/guides/quickstart/)、[添加 Vue](/zh-cn/docs/guides/add-an-app/)，然后[共享计数器](/zh-cn/docs/guides/shared-counter/)。最后一个示例包含源文件和 ZIP，可用于检查两个渲染器发起的数据更新，以及卸载时的清理行为。

<span id="angular-elegir-el-adapter-correcto"></span>

<span class="section-anchor" id="section-3"></span>

## Angular：选择正确的适配器

WU 为基于模块的应用、standalone 组件和 Angular Elements 提供不同的入口。请根据应用架构选择，而不是根据容器名称选择。

| Angular 应用 | WU API | 需要准备的内容 |
| --- | --- | --- |
| 基于 NgModule | `register` | 根模块、平台和根选择器 |
| Standalone 组件 | `registerStandalone` | 组件、配置和 Angular 创建函数 |
| Angular Elements | `registerElement` | Angular Elements 依赖和自定义元素名称 |

请在[适配器参考](/zh-cn/docs/framework/api-adapters/#angularregisterstandalone)中查看签名和选项。CLI 提供带构建配置和 standalone 注册的 Angular 模板：迁移现有应用前，先通过 [CLI 模板](/zh-cn/docs/cli/templates/)了解它生成的文件。

Framework 4 支持 standalone 输入更新、无 Zone 挂载及使用 Zone.js 的应用。Keep-alive 暂停和恢复组件变更检测器。选项和已验证版本详见[适配器矩阵](/zh-cn/docs/framework/api-adapters/)。

<span id="comunicación-entre-react-y-angular"></span>

<span class="section-anchor" id="section-4"></span>

## React 与 Angular 之间的通信

将视觉状态保留在各渲染器内。通过 store 共享数据，通过事件传递事实，通过契约/RPC 执行操作。Framework 4 中微应用内的绑定使用该应用的 facade 和身份；请声明所需的权限申请及 grants。WU 挂载之外的 standalone 绑定可以使用全局运行时。

[共享计数器](/zh-cn/docs/guides/shared-counter/)和 [RPC 求和服务](/zh-cn/docs/guides/rpc-between-apps/)示例使用 React 与 Vue 讲解契约。迁移到 Angular 时，保留契约，并按照 Angular 的生命周期调整订阅、视图更新和清理。

<span id="vue-svelte-lit-y-otros-renderers"></span>

<span class="section-anchor" id="section-5"></span>

## Vue、Svelte、Lit 及其他渲染器

该包还发布了 Vue、Svelte、Preact、Solid、Lit、Vanilla、Alpine、Qwik、Stencil、HTMX 和 Stimulus 适配器。Astro 和 Next 有 Shell 集成。[适配器目录](/zh-cn/docs/framework/api-adapters/)说明了它们的差异；[模板文档](/zh-cn/docs/cli/templates/)区分了代码生成支持与各框架完整构建流程之间的范围。

迁移下一项能力前，请使用项目实际版本检查挂载、导航、样式、通信和卸载。通过[生产指南](/zh-cn/docs/guides/production/)检查发布资源；若应用为空白，请查看[故障排查](/zh-cn/docs/framework/troubleshooting/)。