Bridge 全框架演示台

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 种组合矩阵

六种宿主与六种组件形成 36 种组合。矩阵默认显示“待验证”,点击验证按钮后才运行真实交互并更新结果;失败单元格显示具体原因。

验证包括版本、Props 更新与移除、回调替换、多实例隔离、卸载清理和重新挂载。状态仅代表本次页面中锁定版本的结果,刷新页面后需要重新验证。

本地运行与源码

使用 pnpm 8 安装仓库依赖并构建本地 EMP 工具及 Bridge 包后运行:

pnpm --filter adapter-app dev

默认端口为 7704。运行时使用各自独立的私有 workspace 包,通过本地异步模块加载,避免多版本 React 共用渲染器。

源码及完整验收命令见 演示台 README,实现见 adapter-app 源码。原有 Module Federation 远端示例通过 dev:legacy 运行,保留 Vuex / Pinia 用例;其远端清单、网络与发布链路需要单独验证。