Bridge 演示台覆盖 React 16、17、18、19 与 Vue 2、3,使用统一组件展示宿主与组件之间的渲染、Props、事件和生命周期。
打开全框架演示台 →演示台随官网一起构建和发布。选择宿主和组件后可以直接操作 Props、计数、卸载与重试;点击“验证全部 36 种组合”运行当前页面的交互验证。
| 框架 | 实际运行版本 | 渲染器 |
|---|---|---|
| React 16 | 16.14.0 | ReactDOM 16.14.0 |
| React 17 | 17.0.2 | ReactDOM 17.0.2 |
| React 18 | 18.3.1 | ReactDOM 18.3.1 |
| React 19 | 19.2.3 | ReactDOM 19.2.3 |
| Vue 2 | 2.7.16 | Vue 2.7.16 |
| Vue 3 | 3.5.38 | Vue 3.5.38 |
每种运行时都能作为宿主和组件,共形成 6 × 6 种组合。表格列出本次演示的锁定版本,实时版本以组件卡片显示为准。
每张卡片展示“宿主 → 组件”的完整关系。框架版本读取对应运行时的 React.version 或 Vue.version,不是依赖声明中的版本范围。展开“框架与 Bridge 版本”还可以查看桥接包版本。
页面外壳使用 React 17。通过宿主选择器切换的是卡片内部的真实运行时;组件运行版本来自该组件所属框架。
| 场景 | 操作 | 观察结果 |
|---|---|---|
| Props 更新 | 修改组件名称、计数步长 | 所有组件即时更新,已有计数保持 |
| Props 移除 | 取消“传入可选 Props” | 组件恢复默认展示 |
| 事件回传 | 点击计数或重置 | 事件记录显示组件、实例和新值 |
| 多实例 | 切换“多实例”并操作第一个组件 | 第二个组件计数保持独立 |
| 生命周期 | 卸载、重新挂载 | DOM 清理,计数重置,生命周期事件成对出现 |
| 混合嵌套 | 切换“混合嵌套” | 每层分别显示宿主版本和组件版本 |
| 异步加载 | 开启慢加载,再卸载或切换宿主 | 原实例不会在加载完成后重新挂载 |
| 加载失败 | 模拟失败,再点击重试 | 显示错误并恢复组件 |
六种宿主与六种组件形成 36 种组合。矩阵默认显示“待验证”,点击验证按钮后才运行真实交互并更新结果;失败单元格显示具体原因。
验证包括版本、Props 更新与移除、回调替换、多实例隔离、卸载清理和重新挂载。状态仅代表本次页面中锁定版本的结果,刷新页面后需要重新验证。
使用 pnpm 8 安装仓库依赖并构建本地 EMP 工具及 Bridge 包后运行:
默认端口为 7704。运行时使用各自独立的私有 workspace 包,通过本地异步模块加载,避免多版本 React 共用渲染器。
源码及完整验收命令见 演示台 README,实现见 adapter-app 源码。原有 Module Federation 远端示例通过 dev:legacy 运行,保留 Vuex / Pinia 用例;其远端清单、网络与发布链路需要单独验证。