你聽過 React Fragments嗎？?

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>
    );
}

代碼就變成了這樣

render函數容許返回數組?

react 16開始， render支持返回數組，知道這個特性的人不在少數。這一特性已經能夠減小沒必要要節點嵌套，小夥伴們能夠多多用起來。

import React from 'react';

export default function () {
    return [
        <div>一步 01</div>,
        <div>一步 02</div>,
        <div>一步 03</div>,
        <div>一步 04</div>
    ];
}

Fragments

什麼？你不喜歡寫數組，怎麼不懶死呢~~。好在 React 16爲咱們提供了Fragments。
Fragments與Vue.js的<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>
    );
}

Fragments簡寫形式<></>

簡寫形式<></>是否是很吊的樣子，但目前有些前端工具支持的還不太好，用 create-react-app 建立的項目就不能經過編譯。你們使用在線的編輯器體驗一下吧。

import React from 'react';

export default function () {
    return (
        <>
            <div>一步 01</div>
            <div>一步 02</div>
            <div>一步 03</div>
            <div>一步 04</div>
        </>
    );
}

<></>

以上

如今你就聽過 React Fragments了 ?

【開發環境推薦】 Cloud Studio 是基於瀏覽器的集成式開發環境，支持絕大部分編程語言，包括 HTML五、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等，無需下載安裝程序，一鍵切換開發環境。 Cloud Studio提供了完整的 Linux 環境，而且支持自定義域名指向，動態計算資源調整，能夠完成各類應用的開發編譯與部署。