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 相关文章推荐
javascript 检测浏览器类型和版本的代码
Sep 15 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
Apr 26 Javascript
js对table的td进行相同内容合并示例详解
Dec 27 Javascript
js对象基础实例分析
Jan 13 Javascript
JS实现一个按钮的方法
Feb 05 Javascript
JavaScript创建一个object对象并操作对象属性的用法
Mar 23 Javascript
Jquery实现顶部弹出框特效
Aug 08 Javascript
jQuery双向列表选择器select版
Nov 01 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
Jul 06 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 Javascript
js实现简易计算器小功能
Nov 18 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 运行效率总结(提示程序速度)
2009/11/26 PHP
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
PHP防止图片盗用(盗链)的方法小结
2016/11/11 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
PHP二维数组分页2种实现方法解析
2020/07/09 PHP
JavaScript 动态将数字金额转化为中文大写金额
2009/05/14 Javascript
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
js 链式延迟执行DOME
2012/01/04 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
引用外部脚本时script标签关闭的写法
2014/01/20 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
2015/03/03 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
学好js,这些js函数概念一定要知道【推荐】
2017/01/19 Javascript
微信小程序实现YDUI的ScrollTab组件
2018/02/02 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
关于RxJS Subject的学习笔记
2018/12/05 Javascript
vue页面更新patch的实现示例
2020/03/25 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
2020/05/13 Javascript
python sort、sorted高级排序技巧
2014/11/21 Python
python 下 CMake 安装配置 OPENCV 4.1.1的方法
2019/09/30 Python
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
武汉世纪畅想数字传播有限公司 .NET笔试题
2015/06/13 面试题
人力资源管理专业应届生求职信
2013/09/28 职场文书
单位人事专员介绍信
2014/01/11 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
档案工作汇报材料
2014/08/21 职场文书
建设办主任四风问题整改思路和措施
2014/09/20 职场文书
中学生运动会新闻稿
2014/09/24 职场文书
四风查摆问题及整改措施
2014/10/10 职场文书
晚会闭幕词
2015/01/28 职场文书
接待员岗位职责
2015/02/13 职场文书
横空出世观后感
2015/06/09 职场文书
2016年最美孝心少年事迹材料
2016/02/26 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书
vue自定义右键菜单之全局实现
2022/04/09 Vue.js
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python