ReactJS - Fragments

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

ReactJS - Fragments

什么是Fragments？

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

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

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

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>的简写。就像使用昵称而不是全名一样——更短，更甜！

为什么使用Fragments？

你可能会有疑问，“为什么要麻烦用Fragments？用divs有什么问题？”好问题！让我用一个例子来解释：

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

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

带有Keys的Fragments

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

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>
);
}

在这个例子中，我们使用带有key属性的React.Fragment。这在映射数组并需要为生成的Fragments分配key时很有用。

请注意，当你需要传递key时，不能使用简写语法<>。这就像尝试在护照上使用昵称一样——它就是行不通！

何时使用Fragments

下面是一个方便的表格，帮助您决定何时使用Fragments：

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

结论

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

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

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

Credits: Image by storyset