React-其它内容-Fragment

2023-09-30 14:48:55 浏览数 (1)

前言

React 中的 Fragment 是一种轻量级的组件,用于包裹一组子元素而无需添加额外的 DOM 元素。它们特别有用,因为 React 要求在返回多个元素时将它们包裹在一个容器元素内,而 Fragment 允许你绕过这一限制。

使用 Fragment,你可以更清晰地组织你的代码,而无需引入多余的父级 DOM 元素。这在渲染列表或条件性元素时尤其有用。Fragment 的语法非常简单,只需使用 <React.Fragment> 或简写形式 <> 包裹你的子元素即可。

除了提高代码的可读性和性能外,Fragment 还有助于减少不必要的 DOM 嵌套,有助于更好地维护和调试代码。总之,React 的 Fragment 是一个强大的工具,可以帮助你更好地组织和优化你的组件树,提高应用的性能和可维护性。

Fragment

  • 由于 React 规定, 组件中只能有一个根元素
  • 所以每次编写组件的时候, 我们都需要在最外层包裹一个冗余的标签
代码语言:javascript复制
import React from 'react';

class Home extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            heroList: ['鲁班', '虞姬', '黄忠']
        }
    }

    render() {
        return (
            <div>
                <p>{this.state.heroList[0]}</p>
                <p>{this.state.heroList[1]}</p>
                <p>{this.state.heroList[2]}</p>
            </div>
        )
    }
}

class App extends React.PureComponent {
    render() {
        return (
            <Home/>
        )
    }
}

export default App;
  • 如果不想渲染这个冗余的标签, 那么就可以使用 Fragment 来代替
代码语言:javascript复制
import React from 'react';

class Home extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            heroList: ['鲁班', '虞姬', '黄忠']
        }
    }

    render() {
        return (
            <React.Fragment>
                <p>{this.state.heroList[0]}</p>
                <p>{this.state.heroList[1]}</p>
                <p>{this.state.heroList[2]}</p>
            </React.Fragment>
        )
    }
}

class App extends React.PureComponent {
    render() {
        return (
            <Home/>
        )
    }
}

export default App;

语法糖

  • React.Fragment 的简化写法
代码语言:javascript复制
import React from 'react';

class Home extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            heroList: ['鲁班', '虞姬', '黄忠']
        }
    }

    render() {
        return (
            <>
                <p>{this.state.heroList[0]}</p>
                <p>{this.state.heroList[1]}</p>
                <p>{this.state.heroList[2]}</p>
            </>
        )
    }
}

class App extends React.PureComponent {
    render() {
        return (
            <Home/>
        )
    }
}

export default App;
  • 如果需要给 Fragment 添加 key, 那么就不能使用语法糖写法
代码语言:javascript复制
import React from 'react';

class Home extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            heroList: ['鲁班', '虞姬', '黄忠']
        }
    }

    render() {
        return (
            <>
                {
                    this.state.heroList.map(name => {
                        return (
                            <React.Fragment key={name}>
                                <p>{name}</p>
                            </React.Fragment>
                        )
                    })
                }
            </>
        );
    }
}

class App extends React.PureComponent {
    render() {
        return (
            <Home/>
        )
    }
}

export default App;

官方文档

  • https://zh-hans.reactjs.org/docs/fragments.html
输入图片说明输入图片说明
输入图片说明输入图片说明

最后

本期结束咱们下次再见

0 人点赞