React 中常见模式是为一个组件返回多个元素。为了包裹多个元素你肯定写过很多的 div 和 span，进行不必要的嵌套，无形中增加了浏览器的渲染压力。

版本15

15以前，render 函数的返回必须有一个根节点，否则报错，为满足这一原则我会使用一个没有任何样式的 div 包裹一下。

import React from 'react';

export default function () {
    return (
        <div>
            <div>一步 01</div>
            <div>一步 02</div>
            <div>一步 03</div>
            <div>一步 04</div>
        </div>
    );
}@H_502_7@ 
代码就变成了这样
 
 
render函数允许返回数组?
 
react 16开始， render支持返回数组，知道这个特性的人不在少数。这一特性已经可以减少不必要节点嵌套，小伙伴们可以多多用起来。
 
import React from 'react';

export default function () {
    return [
        <div>一步 01</div>,<div>一步 02</div>,<div>一步 03</div>,<div>一步 04</div>
    ];
}@H_502_7@ 
Fragments
 
什么？你不喜欢写数组，怎么不懒死呢~~。好在 React 16为我们提供了Fragments。
Fragments与Vue.js的@H_404_24@<template>功能类似，可做不可见的包裹元素。
 
import React from 'react';

export default function () {
    return (
        <React.Fragment>
            <div>一步 01</div>
            <div>一步 02</div>
            <div>一步 03</div>
            <div>一步 04</div>
        </React.Fragment>
    );
}@H_502_7@ 
Fragments简写形式@H_404_24@<></> 
 
简写形式@H_404_24@<></>是不是很吊的样子，但目前有些前端工具支持的还不太好，用 create-react-app 创建的项目就不能通过编译。大家使用在线的编辑器体验一下吧。
 
import React from 'react';

export default function () {
    return (
        <>
            <div>一步 01</div>
            <div>一步 02</div>
            <div>一步 03</div>
            <div>一步 04</div>
        </>
    );
}@H_502_7@ 
<></>
 
以上
 
现在你就听过 React Fragments了 ?
 

  【开发环境推荐】 
 Cloud Studio 是基于浏览器的集成式开发环境，支持绝大部分编程语言，包括 HTML5、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等，无需下载安装程序，一键切换开发环境。 Cloud Studio提供了完整的 Linux 环境，并且支持自定义域名指向，动态计算资源调整，可以完成各种应用的开发编译与部署。 
 原文链接：https://www.f2er.com/react/301953.html