写点什么

React Fragment 介绍与使用

作者:编程江湖
  • 2022 年 2 月 08 日
  • 本文字数:1338 字

    阅读完需:约 4 分钟

前言

在向 DOM 树批量添加元素时,一个好的实践是创建一个 document.createDocumentFragment,先将元素批量添加到

DocumentFragment 上,再把 DocumentFragment 添加到 DOM 树,减少了 DOM 操作次数的同时也不会创建一个新元素。

和 DocumentFragment 类似,React 也存在 Fragment 的概念,用途很类似。在 React 16 之前,Fragment 的创建是通过扩展包 react-addons-create-fragment 创建,而 React 16 中则通过<React.Fragment></React.Fragment> 直接创建 ‘Fragment’。

Fragments 出现动机

一种常见模式是组件返回一个子元素列表。以此 React 代码片段为例:

class Table extends React.Component {
render() {
return (
<table>
<tr>
<Columns />
</tr>
</table>
);
}
}
复制代码


< Columns /> 需要返回多个 元素以使渲染的 HTML 有效。如果在 < Columns /> 的 render() 中使用了父 div,则生成的 HTML 将无效。

class Columns extends React.Component {
render() {
return (
<div>
<td>Hello</td>
<td>World</td>
</div>
);
}
}
复制代码

得到一个 < Table /> 输出:

<table>
<tr>
<div>
<td>Hello</td>
<td>World</td>
</div>
</tr>
</table>
复制代码


Fragments 由此出现解决了这个问题。

React Fragment 介绍与使用

React.Fragment 组件能够在不额外创建 DOM 元素的情况下,让 render() 方法中返回多个元素。一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组,而无需向 DOM 添加额外节点。

理解起来就是在我们定义组件的时候 return 里最外层包裹的 div 往往不想渲染到页面,那么就要用到我们的 Fragment 组件了。就和 vue 的<template ></ template >.

render() {
return (
<React.Fragment>
Some text.
<h2>A heading</h2>
</React.Fragment>
);
}
复制代码

你也可以使用其简写语法 <></>。

render() {
return (
<>
Some text.
<h2>A heading</h2>
</>
);
}
复制代码

另外 react 16 开始, render 支持返回数组,知道这个特性的人不在少数。这一特性已经可以减少不必要节点嵌套。

import React from 'react';
export default function () {
return [
<div>1</div>,
<div>2</div>,
<div>3</div>
];
}
复制代码

<React.Fragment> 与 <>区别

<></> 语法不能接受键值或属性,<React.Fragment>可以。

使用显式 <React.Fragment> 语法声明的片段可能具有 key。一个使用场景是将一个集合映射到一个 Fragments 数组 - 举个例子,创建一个描述列表:

function Glossary(props) {
return (
<dl>
{props.items.map(item => (
// 没有`key`,React 会发出一个关键警告
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.description}</dd>
</React.Fragment>
))}
</dl>
);
}
复制代码

key 是唯一可以传递给 Fragment 的属性。未来可能会添加对其他属性的支持,例如事件。

注意:简写形式<></>,但目前有些前端工具支持的还不太好,用 create-react-app 创建的项目可能就不能通过编译。所以遇到这种情况很正常。

用户头像

编程江湖

关注

IT技术分享 2021.11.23 加入

还未添加个人简介

评论

发布
暂无评论
React Fragment介绍与使用