React Fragment介绍与使用详解


Posted in Javascript onNovember 11, 2021

前言

在向 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 创建的项目可能就不能通过编译。所以遇到这种情况很正常。

到此这篇关于React Fragment介绍与使用详解的文章就介绍到这了,更多相关React Fragment内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 Javascript
通过JS来动态的修改url,实现对url的增删查改
Sep 01 Javascript
node.js中的fs.stat方法使用说明
Dec 16 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
纯js实现无限空间大小的本地存储
Jun 18 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
Jan 28 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
Nov 25 Javascript
vue.js入门(3)——详解组件通信
Dec 02 Javascript
微信小程序 页面跳转和数据传递实例详解
Jan 19 Javascript
angular4 共享服务在多个组件中数据通信的示例
Mar 30 Javascript
layer弹出层全屏及关闭方法
Aug 17 Javascript
在js中修改html body的样式
Nov 11 #Javascript
用JS创建一个录屏功能
JavaScript数组 几个常用方法总结
Nov 11 #Javascript
JavaScript 事件捕获冒泡与捕获详情
JavaScript 定时器详情
Nov 11 #Javascript
使用javascript解析二维码的三种方式
Nov 11 #Javascript
实现一个简单得数据响应系统
Nov 11 #Javascript
You might like
php数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
PHP中__set()实例用法和基础讲解
2019/07/23 PHP
THINKPHP-Apache服务器中使用Alias虚拟目录URL重写 隐藏index.php
2021/03/09 PHP
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
js/jquery判断浏览器类型的方法小结
2015/05/12 Javascript
javascript设置页面背景色及背景图片的方法
2015/12/29 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
2016/09/12 Javascript
微信小程序 获取微信OpenId详解及实例代码
2016/10/31 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
vue 父组件中调用子组件函数的方法
2019/06/06 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
深入剖析JavaScript instanceof 运算符
2019/06/14 Javascript
微信小程序的授权实现过程解析
2019/08/02 Javascript
vue实现购物车选择功能
2020/01/10 Javascript
vue点击按钮实现简单页面的切换
2020/09/08 Javascript
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
Python实现获取操作系统版本信息方法
2015/04/08 Python
使用Python实现Wake On Lan远程开机功能
2020/01/22 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
2017/05/18 HTML / CSS
日本最大美瞳直送网:Morecontact(中文)
2019/04/03 全球购物
德国在线购买葡萄酒网站:Geile Weine
2019/09/24 全球购物
面向对象概念面试题(.NET)
2016/11/04 面试题
C#如何调用Windows程序打开一个文档
2014/12/26 面试题
《威尼斯的小艇》教学反思
2014/02/17 职场文书
创先争优承诺书范文
2014/03/31 职场文书
副董事长岗位职责
2014/04/02 职场文书
2014物价局群众路线对照检查材料思想汇报
2014/09/21 职场文书
事业单位工作人员年度考核个人总结
2015/02/12 职场文书
建筑技术负责人岗位职责
2015/04/13 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书
Python开发工具Pycharm的安装以及使用步骤总结
2021/06/24 Python
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL
《极主夫道》真人电影正式预告 定档6月3日上映
2022/04/05 日漫