React Fragments

React的常见模式是一个组件返回一个子组件。如果要返回子元素列表，一般需要包括在一个标签内，例如返回table>tr内部的td标签。父组件：

class Table extends React.Component{

    render() {

        return(

            <table>

                <tr>

                    <Columns />

                </tr>

            </table>

        )

}

子组件Columns需要返回多个td。

class Columns extends React.Component {

    render () {

        return (

            <div>

                <td>Hello</td >

                <td>World</td>

            </div>

        )

}

上面的例子最终经过渲染会得到，tr标签包裹div标签，div标签包裹td标签。这是就可以使用Fragment了。

<React.Fragment>

    <td>Hello</td>

    <td> World</td>

</React.Fragment>

上面React.Fragment包裹的元素在最终渲染后是一个空标签，结果如同我们设想的那样，tr标签包裹td。Fragment还有另一种短标签的写法。

return(

    <>

        <td>Hello</td>

        <td>World</td>

    </>

)

此外，Fragment还支持key属性，React在遍历内部原始时常使用.map。key跟map通常是成对出现的，用于帮助React标记元素，在需要局部渲染时，react会根据key来进行判断。