React Fragment介绍与使用详解

2024-10-09 11:32:45

前言

在向 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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

React Native实现简单的登录功能(推荐)

React Native 简介: React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用.在 JavaScript 中用 React 抽象操作系统原生的 UI 组件,代替 DOM 元素来渲染等. React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验.React Native 把重点放在所有开发人员关心的平台的开发效率上
react-router browserHistory刷新页面404问题解决方法

使用React开发新项目时,遇见了刷新页面,直接访问二级或三级路由时,访问失败,出现404或资源加载异常的情况,本篇针对此问题进行分析并总结解决方案. 背景使用webpack-dev-server做本地开发服务器时,正常情况只需要简单使用webpack-dev-server指令启动即可,但是当项目处于以下两种情况时,往往需要有嵌套路由和异步加载路由: 我们使用react-router这种路由库构建单页面应用路由: 使用html-webpack-plugin插件动态将加载js的<script>
详解各版本React路由的跳转的方法

前言 React-Router已经发布了多个版本,利用路由导航的使用方法都不大一样,在这里总结一下. React-Router 2.0.0 版本 2.0.0版本需要使用browserHistory进行跳转,具体参考一下代码: import { browserHistory } from 'react-router' browserHistory.push('/path') React-Router 2.4.0版本以上 React-Router 2.4.0版本以上,可以通过mixin的方法,使组件
ReactNative 之FlatList使用及踩坑封装总结

在RN中FlatList是一个高性能的列表组件,它是ListView组件的升级版,性能方面有了很大的提升,当然也就建议大家在实现列表功能时使用FlatList,尽量不要使用ListView,更不要使用ScrollView.既然说到FlatList,那就先温习一下它支持的功能. 完全跨平台. 支持水平布局模式. 行组件显示或隐藏时可配置回调事件. 支持单独的头部组件. 支持单独的尾部组件. 支持自定义行间分隔线. 支持下拉刷新. 支持上拉加载. 支持跳转到指定行(ScrollToIndex). 今
使用react-router4.0实现重定向和404功能的方法

在开发中,重定向和404这种需求非常常见,使用React-router4.0可以使用Redirect进行重定向最常用的就是用户登录之后自动跳转主页. import React, { Component } from 'react'; import axios from 'axios'; import { Redirect } from 'react-router-dom'; class Login extends Component{ constructor(){ super(); this.
react-redux中connect的装饰器用法@connect详解

最近在琢磨react中的一些小技巧,这篇文章记录一下在redux中用装饰器来写connect. 通常我们需要一个reducer和一个action,然后使用connect来包裹你的Component.假设你已经有一个key为main的reducer和一个action.js. 我们的App.js一般都这么写: import React from 'react' import {render} from 'react-dom' import {connect} from 'react-redux' i
react build 后打包发布总结

一,部署在apache web服务器上(wamp | xammp) 1.后台接口需要做跨域设置 (1)在服务端利用Access-Control-Allow-Origin响应头解决. 设置Access-Control-Allow-Origin:*,允许所有域名的脚本访问该资源. 如果考虑到安全问题,也可以设置Access-Control-Allow-Origin:www.build.im 允许特定域名访问 (2)服务器做反向代理 2.打包文件单独放置一个服务器 (1)把react 项
详解React Native开源时间日期选择器组件(react-native-datetime)

项目介绍该组件进行封装一个时间日期选择器,同时适配Android.iOS双平台,该组件基于@remobile/react-native-datetime-picker进行开发而来配置安装 npm install react-native-datetime --save 1.1.iOS环境配置上面步骤完成之后,直接前台写js代码即可 1.2.Android环境配置在android/setting.gradle文件中如下配置 ... include ':react-native-dateti
React Fragment介绍与使用详解

目录前言 Fragments出现动机 React Fragment介绍与使用 <React.Fragment> 与 <>区别前言在向 DOM 树批量添加元素时,一个好的实践是创建一个document.createDocumentFragment,先将元素批量添加到 DocumentFragment 上,再把 DocumentFragment 添加到 DOM 树,减少了 DOM操作次数的同时也不会创建一个新元素. 和 DocumentFragment 类似,React 也存在
js中自定义react数据验证组件实例详解

我们在做前端表单提交时,经常会遇到要对表单中的数据进行校验的问题.如果用户提交的数据不合法,例如格式不正确.非数字类型.超过最大长度.是否必填项.最大值和最小值等等,我们需要在相应的地方给出提示信息.如果用户修正了数据,我们还要将提示信息隐藏起来. 有一些现成的插件可以让你非常方便地实现这一功能,如果你使用的是knockout框架,那么你可以借助于Knockout-Validation这一插件.使用起来很简单,例如我下面的这一段代码: ko.validation.locale('zh-CN');
Android Fragment的用法实例详解

碎片,它的出现是为了更好展示UI的设计,让程序更加得到充分的展示.Fragment的出现,如微信的额主界面包含多个Fragment,使得微信功能更加简洁明了. Fragment组件 Fragment是Android 3.0的时候被引入的,主要目的是为了给大屏幕(如平板电脑)添加动态和灵活的UI支持.利用Fragment实现更好的用户体验. Fragment加载 1.静态加载:添加Fragment到Activity布局中,以xml的形式. 2.动态加载: <LinearLayout android
react的hooks的用法详解

hooks的作用它改变了原始的React类的开发方式,改用了函数形式;它改变了复杂的状态操作形式,让程序员用起来更轻松;它改变了一个状态组件的复用性,让组件的复用性大大增加. useState // 声明状态 const [ count , setCount ] = useState(0); // 使用状态 <p>You clicked {count} times</p> <button onClick={()=>{setCount(count+1)}}>cli
Android入门教程之Fragment的具体使用详解

目录 Fragment 的简单用法动态加载 Fragment Fragment 实现返回栈 Fragment 和 Activity 之间的交互 Fragment 生命周期 Fragment 的简单用法 Fragment 是一种可以嵌入在 Activity 当中的 UI 片段,它能让程序更加合理和充分地利用大屏幕的空间,因此在平板上应用非常广泛在一个 Activity 中添加两个 Fragment,并让两个 Fragment 平分 Activity 的空间,首先新建一个左侧 Fragment
React中父子组件通信详解

目录父组件向子组件通信存在期父组件向子组件通信在父组件中,为子组件添加属性数据,即可实现父组件向子组件通信.传递的数据可以分成两类子组件是作为属性来接收这些数据的第一类就是数据:变量,对象,属性数据,状态数据等等这些数据发生改变,子组件接收的属性数据就发生了改变. 第二类就是方法:父组件可以向子组件传递属性方法,子组件接收方法,并可以在组件内执行,有两种执行方式注意:父组件传给子组件的方法是不能执行的,执行了相当于将方法的返回值传递给子组件. 第一种作为事件回调函数执行参数默
React中react-redux和路由详解

目录观察者模式解决组件间通信问题 react-redux connect方法 Provider组件路由使用路由默认路由路由重定向获取路由参数路由导航观察者模式解决组件间通信问题使用观察者解决组件间通信,分成两步在一个组件中,订阅消息在另一个组件中,发布消息发布消息之后,订阅的消息回调函数会执行,在函数中,我们修改状态,这样就可以实现组件间通信了.这就是reflux框架的实现. react-redux redux早期被设计成可以在各个框架中使用,因此在不同的框架中使用的时候
React中的生命周期详解

目录 react生命周期常用的生命周期不常用的生命周完整的生命周期图 react生命周期函数组件无生命周期,生命周期只有类组件才拥有生命周期函数指在某一时刻组件会自动调用并执行的函数. React每个类组件都包含生命周期方法,以便于在运行过程中特定的阶段执行这些方法. 例如:我们希望在第一次将其呈现到DOM时设置一个计时器Clock.这在React中称为“安装”.我们也想在删除由产生的DOM时清除该计时器Clock.这在React中称为“卸载”. 一般分为:挂载.更新.卸载常用的生
React memo减少重复渲染详解

目录 1. 概述 2. 使用 1. 概述此方法是一个 React 顶层 Api 方法,给函数组件来减少重复渲染,类似于 PureComponent 和 shouldComponentUpdate 方法的集合体. React.memo顶层Api方法,它可以用来减少子组件的重复渲染次数,从而提升组件渲染性能. React.memo它是一个只能在函数组件中使用的顶层Api方法. 当父组件发生改变时,默认情况下它的子孙组件也会重新渲染,当某些子组件不需要更新时,也会被强制更新,为了避免这种情况,我们可
React commit源码分析详解

目录总览 commitBeforeMutationEffects commitMutationEffects 插入 dom 节点获取父节点及插入位置判断当前节点是否为单节点在对应位置插入节点更新 dom 节点更新 HostComponent 更新 HostText 删除 dom 节点 unmountHostComponents commitNestedUnmounts commitUnmount commitLayoutEffects 执行生命周期处理回调总结总览 commit

React Fragment介绍与使用详解

目录

前言

Fragments出现动机

React Fragment介绍与使用

<React.Fragment> 与 <>区别

相关推荐

随机推荐