Vue Fragment vs React Fragment

前言

Vue 3 的 Fragment 与 React 的 Fragment 在设计理念上非常相似，但在实现和使用方式上存在一些差异。

🧩 一、概念对比：Vue Fragment vs React Fragment

📦 二、使用示例对比

✅ Vue 3 中使用 Fragment

<!-- 无需引入 Fragment，自动启用 -->
<template>
  <h1>Hello</h1>
  <p>World</p>
</template>

Vue 编译器自动将其转换为：

return createVNode(Fragment, null, [
  h('h1', 'Hello'),
  h('p', 'World')
])

✅ React 中使用 Fragment

import React from 'react'

function App() {
  return (
    <>
      <h1>Hello</h1>
      <p>World</p>
    </>
  )
}

JSX 编译后会变成：

React.createElement(React.Fragment, null,
  React.createElement('h1', null, 'Hello'),
  React.createElement('p', null, 'World')
)

🔍 三、差异解析

1. 使用方式

• Vue：Fragment 是内建的，无需导入；天然支持
• React：需要写 React.Fragment 或 <> 明确表达

2. 传递属性（如 key）

• React Fragment 可写 key，常用于 .map() 渲染列表

  items.map(item => (
    <React.Fragment key={item.id}>
      <div>{item.name}</div>
      <div>{item.value}</div>
    </React.Fragment>
  ))
  

• Vue Fragment 是编译时产物，不支持 :key 绑定在 Fragment 上（需要用 <template> + v-for 来处理）

3. 插槽系统

• Vue 拥有完整的插槽（slots）系统，可让父组件传递多个根节点给子组件。
• React 使用 props.children，但无法像 Vue 插槽一样传具名、作用域插槽。

✅ 总结：选择建议

🎯 小结

• Vue Fragment：自动启用、插槽友好，专为模板系统设计。
• React Fragment：显式使用，更偏向 JavaScript 逻辑与手动控制。

底层行为与性能表现

深入对比 Vue Fragment vs React Fragment 的底层行为与性能表现，尤其在真实渲染 DOM、组件嵌套复杂度、渲染效率等方面，为你在构建大型或跨框架组件时提供参考。

🧪 一、Fragment 的真实 DOM 行为

✅ 示例对比

Vue DOM 结构（组件模板内）

<template>
  <h1>Hi</h1>
  <p>Bye</p>
</template>

渲染后 DOM 结构：

<h1>Hi</h1>
<p>Bye</p>

React DOM 结构

<>
  <h1>Hi</h1>
  <p>Bye</p>
</>

渲染后 DOM 结构相同。

⚙️ 二、编译 & 渲染机制底层差异

✅ 示例：VNode 对象结构

Vue Fragment vnode 示例

{
  type: Fragment,
  children: [
    { type: 'h1', children: 'Hello' },
    { type: 'p', children: 'World' }
  ]
}

React Fragment vnode 示例

{
  type: React.Fragment,
  props: {
    children: [
      { type: 'h1', props: { children: 'Hello' } },
      { type: 'p', props: { children: 'World' } }
    ]
  }
}

🚀 三、性能对比（渲染效率）

✅ 相同点

• Fragment 本质上都不会带来额外 DOM，DOM 树更轻、更快。
• 两者都避免了冗余 <div>，在大量渲染场景中可以提升性能。

🔍 不同点

实测结论（单个 Fragment 中渲染 1 万行元素）

🧭 四、实际应用建议（跨框架组件）

✅ 总结