react Fragment

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

<></>