登录
你的 Vue TransitionGroup 组件，VuReact 会编译成什么样的 React 代码？
2026年4月21日 09:08
VuReact 是一个能将 Vue 3 代码编译为标准、可维护 React 代码的工具。今天就带大家直击核心：Vue 中内置的 <TransitionGroup> 组件经过 VuReact 编译后会变成什么样的 React 代码？
前置约定
为避免示例代码冗余导致理解偏差，先明确两个小约定：
- 文中 Vue / React 代码均为核心逻辑简写，省略完整组件包裹、无关配置等内容；
- 默认读者已熟悉 Vue 3 中
<TransitionGroup>组件的用法。
编译对照
TransitionGroup：列表过渡动画
<TransitionGroup> 是 Vue 中用于为列表项的插入、移除和重排提供过渡动画的内置组件，是 <Transition> 的列表版本。
基础列表过渡
- Vue 代码：
<template>
<TransitionGroup name="list" tag="ul">
<li v-for="item in items" :key="item.id">
{{ item.name }}
</li>
</TransitionGroup>
</template>
- VuReact 编译后 React 代码：
import { TransitionGroup } from '@vureact/runtime-core';
<TransitionGroup name="list" tag="ul">
{items.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</TransitionGroup>
从示例可以看到：Vue 的 <TransitionGroup> 组件被编译为 VuReact Runtime 提供的 TransitionGroup 适配组件，可理解为「React 版的 Vue TransitionGroup」。
这种编译方式的关键特点在于：
-
语义一致性：完全模拟 Vue
<TransitionGroup>的行为，实现列表过渡动画 - 列表支持：专门为列表项的进入、离开和移动提供动画支持
-
容器标签：通过
tag属性指定列表容器元素 -
key 要求：列表项必须提供稳定的
key属性
对应的 CSS 样式：
.list-enter-from,
.list-leave-to {
opacity: 0;
transform: translateX(30px);
}
.list-enter-active {
opacity: 1;
transform: translateX(0);
transition: all 0.5s ease;
}
.list-leave-active {
opacity: 0;
transform: translateX(30px);
transition: all 0.5s ease;
}
列表重排与移动动画
<TransitionGroup> 支持列表项重排时的平滑移动动画，通过 moveClass 属性实现。
- Vue 代码：
<template>
<TransitionGroup name="list" tag="ul" move-class="list-move">
<li v-for="item in items" :key="item.id">
{{ item.name }}
</li>
</TransitionGroup>
</template>
- VuReact 编译后 React 代码：
<TransitionGroup name="list" tag="ul" moveClass="list-move">
{items.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</TransitionGroup>
移动动画 CSS：
/* 移动动画类 */
.list-move {
transition: all 0.5s ease;
}
/* 离开动画需要绝对定位 */
.list-leave-active {
position: absolute;
}
移动动画原理：
- FLIP 技术：使用 First-Last-Invert-Play 技术实现平滑移动
- 位置计算：计算元素新旧位置差异，应用反向变换
- 平滑过渡：通过 CSS 过渡实现位置变化的动画效果
- 性能优化：使用 transform 属性实现高性能动画
自定义容器元素
通过 tag 属性可以指定列表的容器元素类型。
- Vue 代码：
<template>
<TransitionGroup name="fade" tag="div" class="item-list">
<div v-for="item in items" :key="item.id" class="item">
{{ item.name }}
</div>
</TransitionGroup>
</template>
- VuReact 编译后 React 代码：
<TransitionGroup name="fade" tag="div" className="item-list">
{items.map((item) => (
<div key={item.id} className="item">
{item.name}
</div>
))}
</TransitionGroup>
tag 属性作用：
- 容器类型：指定渲染的 HTML 元素类型（div、ul、ol 等）
- 语义化：使用合适的语义化标签
- 样式控制：方便应用容器样式
- 结构清晰：保持清晰的 DOM 结构
继承 Transition 功能
<TransitionGroup> 继承了 <Transition> 的所有功能，支持相同的属性和钩子。
- Vue 代码：
<template>
<TransitionGroup
name="slide"
tag="div"
:duration="500"
@enter="onEnter"
@leave="onLeave"
>
<div v-for="item in items" :key="item.id">
{{ item.name }}
</div>
</TransitionGroup>
</template>
- VuReact 编译后 React 代码：
<TransitionGroup
name="slide"
tag="div"
duration={500}
onEnter={onEnter}
onLeave={onLeave}
>
{items.map((item) => (
<div key={item.id}>{item.name}</div>
))}
</TransitionGroup>
继承的功能：
- 自定义类名：支持 enter/leave 相关的自定义类名
- JavaScript 钩子：支持所有过渡生命周期钩子
- 持续时间：支持 duration 属性控制动画时长
- CSS 控制：支持 css 属性控制是否应用 CSS 过渡
编译策略总结
VuReact 的 TransitionGroup 编译策略展示了完整的列表过渡转换能力：
-
组件直接映射：将 Vue
<TransitionGroup>直接映射为 VuReact 的<TransitionGroup> -
属性完全支持：支持
name、tag、moveClass等所有属性 -
列表渲染转换：将
v-for转换为map函数调用 -
动画功能继承：继承所有
<Transition>的动画功能
注意事项：
-
key 必须：列表项必须提供稳定的
key，否则动画可能异常 -
CSS 要求：必须在
*-enter-active和*-leave-active中设置过渡外观 -
移动动画：离开动画需要设置
position: absolute
VuReact 的编译策略确保了从 Vue 到 React 的平滑迁移，开发者无需手动实现列表过渡动画逻辑。编译后的代码既保持了 Vue 的列表过渡语义和动画效果，又符合 React 的组件设计模式，让迁移后的应用保持完整的列表过渡能力。
🔗 相关资源
- VuReact 官方文档：语义编译对照总览
- VuReact Runtime：TransitionGroup 组件
- Github：github.com/vureact-js/…
✨ 如果你觉得本文对你理解 VuReact 有帮助，欢迎点赞、收藏、关注！
