• 技术文章 >web前端 >js教程

    react中fragment是什么?

    青灯夜游青灯夜游2020-11-20 15:44:49原创8184

    fragment是react中的一个组件,作用是代替div作为外层,可做不可见的包裹元素。定义组件的时,return返回需要唯一根元素,所以经常会写一个div来包裹,但如果不想渲染这个div,减少dom渲染,就可以引用Fragment组件。

    推荐教程:《React视频教程

    fragment是react中的一个组件,作用是代替div作为外层,可做不可见的包裹元素。

    React中一个组件往往要返回多个元素,同时,React又要求这些元素必须被包裹在一个元素下,最普遍的做法是用<div>包裹。这样做的问题是增加了许多不必要的嵌套,无形中增加了浏览器的渲染压力。

    从react 16开始, render支持返回数组:

    import React from 'react';
     
    export default function () {
        return [
            <div>一步 01</div>,
            <div>一步 02</div>,
            <div>一步 03</div>,
            <div>一步 04</div>
        ];
    }

    同时,也提供了另一种方法,那就是Fragments。

    在我们定义组件的时候,return返回需要唯一根元素,所以我们经常会写一个div来包裹,,如果我们不想渲染这个div,减少dom渲染,就可以引用Fragment组件。

    import React from 'react';
     
    export default function () {
        return (
            <Fragment>
                <div>一步 01</div>
                <div>一步 02</div>
                <div>一步 03</div>
                <div>一步 04</div>
            </Fragment>
        );
    }

    更多编程相关知识,请访问:编程入门!!

    以上就是react中fragment是什么?的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:react fragment
    上一篇:jquery中$符号的作用是什么? 下一篇:jquery和document获取html元素的区别是什么?
    大前端线上培训班

    相关文章推荐

    • react native有什么用?• react中npm是什么• react如何写点击事件• react组件有过哪些性能优化• react中图片怎么引用

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网