React Fragments
在React中,每当您要在屏幕上渲染某些东西时,都需要在组件内部使用render方法。此渲染方法可以返回单个元素或多个元素。 render方法一次只能渲染其中一个根节点。但是,如果要返回多个元素,render方法将需要一个' div '标签,并将整个内容或元素放入其中。 DOM的这个额外节点有时会导致您的HTML输出格式错误,并且也未被许多开发人员所喜爱。
示例
// Rendering with div tag
class App extends React.Component {
render() {
return (
//Extraneous div element
<div>
<h2> Hello World! </h2>
<p> Welcome to the lidihuo. </p>
</div>
);
}
}
为解决此问题,React从 16.2 及更高版本引入了 Fragments 。片段使您可以对子列表进行分组,而无需在DOM中添加额外的节点。
语法
<React.Fragment>
<h2> child1 </h2>
<p> child2 </p>
.. ..... .... ...
</React.Fragment>
示例
// Rendering with fragments tag
class App extends React.Component {
render() {
return (
<React.Fragment>
<h2> Hello World! </h2>
<p> Welcome to the lidihuo. </p>
</React.Fragment>
);
}
}
为什么使用片段?
使用片段标签的主要原因是:
与div标签相比,它使代码的执行速度更快。
占用更少的内存。
"片段"短语法
对于上述方法,还存在另一种用于声明片段的简写形式。看起来像空标签,在其中可以使用'<>'和''代替' React.Fragment '。
示例
//Rendering with short syntax
class Columns extends React.Component {
render() {
return (
<>
<h2> Hello World! </h2>
<p> Welcome to the lidihuo </p>
</>
);
}
}
键控片段
速记语法不接受键属性。您需要一个键来将集合映射到片段数组,例如创建描述列表。如果需要提供密钥,则必须使用显式< React.Fragment >语法声明片段。
注意: 键是唯一可以与片段一起传递的属性。
示例
Function = (props) {
return (
<Fragment>
{props.items.data.map(item => (
// Without the 'key', React will give a key warning
<React.Fragment key={item.id}>
<h2>{item.name}</h2>
<p>{item.url}</p>
<p>{item.description}</p>
</React.Fragment>
))}
</Fragment>
)
}