React 中如何使用 Fragments？

推荐答案

在 React 中，Fragments 允许你将多个子元素分组，而无需向 DOM 添加额外的节点。你可以使用 React.Fragment 或者简写语法 <>...</> 来实现。

-- -------------------- ---- -------
------ ----- ---- --------

-------- ------------- -
  ------ -
    ----------------
      -----------
      -----------
    -----------------
  --
-

-- --------
-------- ------------- -
  ------ -
    --
      -----------
      -----------
    ---
  --
-

本题详细解读

什么是 Fragments？

Fragments 是 React 提供的一种机制，允许你将多个子元素分组，而不会在 DOM 中引入额外的节点。这在某些情况下非常有用，比如当你需要返回多个元素但又不想添加一个额外的 div 或其他容器元素时。

为什么使用 Fragments？

1. 避免不必要的 DOM 节点：在某些情况下，添加额外的 div 或其他容器元素可能会导致不必要的 DOM 节点，这可能会影响性能或破坏 CSS 布局。
2. 保持结构简洁：使用 Fragments 可以让你的组件结构更加简洁，避免嵌套过深。

如何使用 Fragments？

1. 使用 React.Fragment：你可以显式地使用 React.Fragment 来包裹多个子元素。

   <React.Fragment>
     <h1>标题</h1>
     <p>段落内容</p>
   </React.Fragment>

2. 使用简写语法 <>...</>：React 还提供了一种简写语法 <>...</>，它与 React.Fragment 的功能相同，但更加简洁。

   <>
     <h1>标题</h1>
     <p>段落内容</p>
   </>

Fragments 的特殊属性

React.Fragment 可以接受一个 key 属性，这在渲染列表时非常有用。例如：

-- -------------------- ---- -------
-------- -------- ----- -- -
  ------ -
    ----
      --------------- -- -
        --------------- --------------
          --------------------
          ---------------------------
        -----------------
      ---
    -----
  --
-

注意事项

• 简写语法不支持属性：简写语法 <>...</> 不支持任何属性，包括 key。如果你需要传递 key，必须使用 React.Fragment。
• Fragments 不会渲染到 DOM：Fragments 不会在 DOM 中生成任何实际的节点，它们只是逻辑上的容器。

通过使用 Fragments，你可以更灵活地组织你的组件结构，同时保持 DOM 的简洁和高效。