React 中常见模式是为一个组件返回多个元素。为了包裹多个元素你肯定写过很多的 div 和 span,进行了不必要的嵌套,增加了浏览器的渲染压力。Fragments 可以让你聚合子元素列表,并且不增加额外节点。
版本15
15以前,render 函数的返回必须有一个根节点,否则报错,为满足这一原则我会使用一个没有任何样式的 div 包裹一下数组。
import React from 'react';
export default function () {
return (
<div>
<div>一步 01</div>
<div>一步 02</div>
<div>一步 03</div>
<div>一步 04</div>
</div>
);
}
代码就变成了这样
render函数允许返回数组👍
react 16开始, render支持返回数组,知道这个特性的人不在少数。这一特性已经可以避免不必要节点嵌套了,小伙伴可以多多用起来。
import React from 'react';
export default function () {
return [
<div>一步 01</div>,
<div>一步 02</div>,
<div>一步 03</div>,
<div>一步 04</div>
];
}
Fragments
什么?你不喜欢写数组,怎么不懒死呢~~。好在 React 16为我们提供了Fragments。
Fragments与Vue.js的<template>
功能类似,做不可见的包裹元素。
import React from 'react';
export default function () {
return (
<React.Fragment>
<div>一步 01</div>
<div>一步 02</div>
<div>一步 03</div>
<div>一步 04</div>
</React.Fragment>
);
}
Fragments简写形式<></>
很吊的样子,但是目前有些前端工具支持的还不太好,我使用 create-react-app 创建的项目就不能通过编译。大家使用在线的编辑器体验一下吧。
import React from 'react';
export default function () {
return (
<>
<div>一步 01</div>
<div>一步 02</div>
<div>一步 03</div>
<div>一步 04</div>
</>
);
}
以上
现在你就听过 React Fragments了 👏