作用:代替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简写形式<></>。
网友评论