React.Fragment

[whizbz11]

React 中一个常见模式是为一个组件返回多个元素.为了包裹多个元素你肯定写过很多的 div 和 span，进行不必要的嵌套，无形中增加了浏览器的渲染压力。Fragments 可以让你聚合一个子元素列表，并且不在DOM中增加额外节点。

React 15
import React from 'react';

export default function () {
    return (
        <div>
            <div>ChildA</div>
            <div>ChildB</div>
            <div>ChildC</div>
            <div>ChildD</div>
        </div>
    );
}

React 16支持返回数组

import React from 'react';

export default function () {
    return [
            <div>ChildA</div>
            <div>ChildB</div>
            <div>ChildC</div>
            <div>ChildD</div>
        </div>
    ]
}

除了返回数组，react还支持了Fragments。与Vue.js的

import React from 'react';

export default function () {
    return (
        <React.Fragment key='value'>
            <div>ChildA</div>
            <div>ChildB</div>
            <div>ChildC</div>
            <div>ChildD</div>
        </React.Fragment>
    );
}

key 是唯一可以传递给 Fragment 的属性。在将来，我们可能增加额外的属性支持，比如事件处理。