美文网首页
React中的Fragment

React中的Fragment

作者: 章鱼要回家 | 来源:发表于2019-03-18 10:07 被阅读0次

作用:代替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:

import React from 'react';

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

Fragments简写形式<></>。

相关文章

网友评论

      本文标题:React中的Fragment

      本文链接:https://www.haomeiwen.com/subject/rqommqtx.html