In this lesson, we will look at Fragments and how they are useful in achieving a cleaner DOM structure without additional empty div elements.

const HeaderFooter = () => {
return (
<div>
<div>
header
</div>
<div>
footer
</div>
</div>
);
}

import React, { Component, Fragment } from 'react';
import {render} from 'react-dom'
const HeaderFooter = () => {
return (
<Fragement>
<div>
header
</div>
<div>
footer
</div>
</Fragment>
);
} export default class App extends Component {
render() {
return (
<div>
<HeaderFooter />
</div>
);
}
} render(<App />, document.getElementById('root'));

[React] Use React Fragments to make your DOM tree cleaner的更多相关文章

  1. 学习React系列(三)——Refs和Dom

    一.适用于以下场景: 1.控制焦点,文本选择,或者媒体控制 2.触发必要的动画 3.整合第三方dom库 二.不要过度使用ref 如果想通过ref来改变state,那么换一种方式-变量提升可能会更好. ...

  2. 前端笔记之React(四)生命周期&Virtual DOM和Diff算法&日历组件开发

    一.React生命周期 一个组件从出生到消亡,在各个阶段React提供给我们调用的接口,就是生命周期. 生命周期这个东西,必须有项目,才知道他们干嘛的. 1.1 Mouting阶段[装载过程] 这个阶 ...

  3. JavaScript 和 React,React用了大量语法糖,让JS编写更方便。

    https://reactjs.org/docs/higher-order-components.htmlhttps://codepen.io/gaearon/pen/WooRWa?editors=0 ...

  4. React学习笔记-1-什么是react,react环境搭建以及第一个react实例

    什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...

  5. 小谈React、React Native、React Web

    React有三个东西,React JS 前端Web框架,React Native 移动终端Hybrid框架,React Web是一个源码转换工具(React Native 转 Web,并之所以特别提出 ...

  6. React的React Native

    React的React Native React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React ...

  7. 重谈react优势——react技术栈回顾

    react刚刚推出的时候,讲react优势搜索结果是几十页. 现在,react已经慢慢退火,该用用react技术栈的已经使用上,填过多少坑,加过多少班,血泪控诉也不下千文. 今天,再谈一遍react优 ...

  8. React 与 React Native 底层共识:React 是什么

    此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React 与 React Native 结合学习的方法,此小节主要介绍 React 的底层原理与 ...

  9. 一次掌握 React 与 React Native 两个框架

    此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React 与 React Native 结合学习的方法. 1. 软件开发语言与框架的学习本质 我 ...

随机推荐

  1. Swoole 源码分析——进程管理 Swoole_Process

    前言 swoole-1.7.2 增加了一个进程管理模块,用来替代 PHP 的 pcntl 扩展. PHP自带的pcntl,存在很多不足,如 pcntl 没有提供进程间通信的功能 pcntl 不支持重定 ...

  2. javascript 中一些奇葩的日期换算

    1.获取今天的0时0分0秒(常用于开始日期的获取) new Date(new Date().toLocaleDateString()); // Mon Nov 12 2018 00:00:00 GMT ...

  3. python在不同情况下写入csv文件

    情况一(解法一):将列表存储为csv文件.列表的每一项代表csv文件的一行. 列表中的每一项包含多个属性.list=[[属性1,属性2,属性3,……],[属性1,属性2,属性3,……],[属性1,属性 ...

  4. 一个简单搜索引擎的搭建过程(Solr+Nutch+Hadoop)

    最近,因为未来工作的需要,我尝试安装部署了分布式爬虫系统Nutch,并配置了伪分布式的Hadoop来存储爬取的网页结果,用solr来对爬下来的网页进行搜索.我主要通过参考网上的相关资料进行安装部署的. ...

  5. oracle 10g/11g 命令对照,日志文件夹对照

     oracle 10g/11g  命令对照,日志文件夹对照 oracle 11g 中不再建议使用的命令 Deprecated Command Replacement Commands crs_st ...

  6. yii自己定义CLinkPager分页

    在components中自己定义LinkPager.并继承CLinkPager 代码例如以下: <? php /** * CLinkPager class file. * * @author l ...

  7. xBIM 基础05 3D墙案例

    系列目录    [已更新最新开发文章,点击查看详细]  使用编码的形式去生成一堵墙的模型需要做很多的工作. using System; using System.Collections.Generic ...

  8. spring boot多数据源配置示例

    1. application.properties #\u4E3B\u5E93\u914D\u7F6E spring.datasource.primary.url=jdbc:mysql://mysql ...

  9. SAS拆分数据集

    2012年8月8日 主要是根据选取条件来进行拆分 1.根据行数来选: data test; set oldset; if _n_=10 then output; if id="001&quo ...

  10. java中return在Try-Catch中的执行顺序

    我们知道return会结束此方法并返回指定值.以及在Try-catch-finally中无论try代码块中有没有异常finally中的代码时都会被执行的.但是如果return包含在try-catch- ...