这篇文章将为大家详细讲解有关如何进行React Fragment介绍与使用,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。在向 DOM 树批量添加元素时,一个好的实践是创建一个document
这篇文章将为大家详细讲解有关如何进行React Fragment介绍与使用,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
在向 DOM 树批量添加元素时,一个好的实践是创建一个document.createDocumentFragment,先将元素批量添加到
DocumentFragment 上,再把 DocumentFragment 添加到 DOM 树,减少了 DOM操作次数的同时也不会创建一个新元素。
和 DocumentFragment 类似,React 也存在 Fragment 的概念,用途很类似。在 React 16之前,Fragment 的创建是通过扩展包 react-addons-create-fragment 创建,而 React 16 中则通过<React.Fragment></React.Fragment> 直接创建 ‘Fragment'。
一种常见模式是组件返回一个子元素列表。以此 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 组件能够在不额外创建 DOM 元素的情况下,让 render() 方法中返回多个元素。一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组,而无需向 DOM 添加额外节点。
理解起来就是在我们定义组件的时候return里最外层包裹的div往往不想渲染到页面,那么就要用到我们的Fragment组件了。就和Vue的<template ></ template >.
render() { return ( <React.Fragment> Some text. <h3>A heading</h3> </React.Fragment> );}
你也可以使用其简写语法 <></>。
render() { return ( <> Some text. <h3>A heading</h3> </> );}
另外react 16开始, render支持返回数组,知道这个特性的人不在少数。这一特性已经可以减少不必要节点嵌套。
import React from 'react';export default function () { return [ <div>1</div>, <div>2</div>, <div>3</div> ];}
<></> 语法不能接受键值或属性,<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 创建的项目可能就不能通过编译。所以遇到这种情况很正常。
关于如何进行React Fragment介绍与使用就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
--结束END--
本文标题: 如何进行React Fragment介绍与使用
本文链接: https://www.lsjlt.com/news/305324.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0