ReactJS - 片段

你好啊，有志的开发者们！今天，我们将深入探讨 React 的一个便捷特性：片段（Fragments）。作为你友善的计算机科学老师，我很兴奋能引导你了解这个主题。在本课结束时，你将能像专业人士一样使用片段！那么，让我们开始吧。

片段是什么？

想象你正在为旅行打包，你想要把所有必需品放在一起，但又不想使用一个笨重的行李箱。这正是 React 中的片段所做的！它们允许我们组合多个元素，而不会在 DOM 中添加额外的节点。

在 React 中，一个组件只能返回一个单一元素。这常常导致开发者用一个不必要的 <div> 来包裹多个元素。片段优雅地解决了这个问题。

让我们来看一个简单的例子：

import React from 'react';

function WithoutFragment() {
return (
<div>
<h1>Hello</h1>
<p>World</p>
</div>
);
}

function WithFragment() {
return (
<React.Fragment>
<h1>Hello</h1>
<p>World</p>
</React.Fragment>
);
}

在 WithoutFragment 组件中，我们被迫使用一个 <div> 来包裹我们的元素。但在 WithFragment 中，我们使用 React.Fragment 来组合我们的元素，而不会添加额外的 DOM 节点。

速写语法

现在，每次都输入 React.Fragment 可能会有些繁琐。这就像在考试每一页上都写下你的全名！幸运的是，React 提供了一个更短的语法：

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

空标签 <> 和 </> 是 <React.Fragment> 和 </React.Fragment> 的速写形式。这就好比使用昵称而不是你的全名——更短，更甜！

为什么使用片段？

你可能在想，“为什么要麻烦使用片段？用 <div> 有什么问题？”好问题！让我用例子来解释：

function TableExample() {
return (
<table>
<tr>
<React.Fragment>
<td>Hello</td>
<td>World</td>
</React.Fragment>
</tr>
</table>
);
}

在这个例子中，如果我们使用 <div> 而不是片段，我们的 HTML 将是无效的，因为 <div> 不允许作为 <tr> 的子元素。片段允许我们组合这些 <td> 元素，而不会破坏表格结构。

带键的片段

现在，让我们升级一下！有时，你需要给你的片段添加一个键，特别是在渲染列表时。以下是如何操作的：

function Glossary(props) {
return (
<dl>
{props.items.map(item => (
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.description}</dd>
</React.Fragment>
))}
</dl>
);
}

在这个例子中，我们在 React.Fragment 上使用了 key 属性。这在映射一个数组并需要给生成的片段分配键时很有用。

注意，当你需要传递键时，不能使用速写语法 <>。这就好比尝试在护照上使用昵称——它就是行不通！

何时使用片段

以下是一个方便的表格，帮助你决定何时使用片段：

场景	使用片段？	说明
在不添加额外 DOM 节点的情况下组合元素	是	片段不会创建额外的 DOM 节点
从组件中返回多个元素	是	组件必须返回一个单一元素，而片段允许这样做，而不需要额外的包裹
映射一个数组，并为每个项目返回多个元素	是	在这种情况下使用带键的片段
需要为包装器添加样式或事件处理器	否	使用 <div> 或其他合适的元素代替

结论

好了，各位！我们已经一起穿越了 React 片段的世界。从理解它们的基本用法到探索带键的片段，你现在已经装备好了，可以在你的 React 应用程序中使用这个强大的特性。

记住，片段就像是粘合你组件的无形胶水。它们让你的 DOM 保持干净，代码保持语义化。所以下次当你发现自己又想用那个不必要的 <div> 时，想想片段吧！

在你的 React 项目中练习使用片段，你很快就会看到它们如何让你的代码更干净、更高效。快乐编码，愿片段与你同在！

Credits: Image by storyset