React中Fragment的使用

React Fragment提升性能的秘密

原创已于 2022-03-29 00:01:06 修改 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#React #Fragment

于 2022-03-28 23:52:02 首次发布

React 专栏收录该内容

9 篇文章

订阅专栏

在React中，直接返回多个并列元素会导致错误。通常我们通过添加额外的父元素来解决，但这会增加DOM层级，影响性能。React.Fragment提供了一种方式，允许我们在不增加额外DOM节点的情况下组合子元素，从而优化渲染效率。

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