fragments 是什么？

2019-03-12

回答

Fragments 允许 React 组件在没有外层包裹的情况下返回多个元素，通过对子项进行分组而不是向 DOM 添加额外的元素。 Fragments 提供了更好的性能，更低的内存使用率，更清晰的 DOM 结构，并且可以帮助处理某些 CSS 机制（如：table，Flexbox 和 Grid）。

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

加分回答

可以使用 <></> 代替 <React.Fragment/>。<></> 只是一个语法糖。
<></> 语法不能接受键值或属性，以下情况只能使用 <React.Fragment/>。

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // 没有`key`，将会触发一个key警告
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

key 是唯一可以传递给 Fragment 的属性。未来可能会增加诸如对事件处理等属性的支持。

返回总目录

30 秒面试系列一

欢迎注册黑客派社区，开启你的博客之旅。让学习和分享成为一种习惯！