React中Fragment的使用

React中布局代码中return只能返回有一个元素，如果返回多个并列元素时就会报错：

解决办法就是在并列元素外层包裹一层父元素，如下所示：

export default class Demo extends React.Component {
    constructor(props) {
        super(props)
        this.dataList = [
            { name: 'Javascript', desc: 'Javascript....' },
            { name: 'React', desc: 'React....' },
            { name: 'Vue', desc: 'Vue....' },
            { name: 'Html', desc: 'JHtml....' },
        ]

    }
    render() {
        return (
            // 包裹一层div父元素
            <div className='list-wrap'>
                {
                    this.dataList.map((item) => {
                        return (
                            // 包裹一层父元素
                            <div key={item.name}>
                                <h1 className='name-wrap'>{item.name}</h1>
                                <p className='desc-wrap'>{item.desc}</p>
                            </div>
                        )
                    })
                }
            </div>
        )
    }
}

 但是，这样无形中就增加了浏览器渲染的压力，如果包裹的层级太深，就会影响性能。

上例中的渲染结果：

 

为了解决这个问题，我们可以使用React.Fragment。Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。

export default class Demo2 extends React.Component {
    constructor(props) {
        super(props)
        this.dataList = [
            { name: 'Javascript', desc: 'Javascript....' },
            { name: 'React', desc: 'React....' },
            { name: 'Vue', desc: 'Vue....' },
            { name: 'Html', desc: 'JHtml....' },
        ]

    }



    render() {
        return (
            // 使用Fragment
            <Fragment className='list-wrap'>
                {
                    this.dataList.map((item) => {
                        return (
                            // 使用Fragment
                            <Fragment key={item.name}>
                                <h1 className='name-wrap'>{item.name}</h1>
                                <p className='desc-wrap'>{item.desc}</p>
                            </Fragment>
                        )
                    })
                }
            </Fragment>
        )
    }
}

由运行结果可以看出，Fragment没有增加dom节点，比第一个例子少了两层。但是界面渲染却是一样的。