上节课我们结束了hooks，这节课我们来介绍一个很简单的东西，叫Fragment.

回顾

在开始这节课之前，我们来对上节课来做一个简单的回顾：

  • 用ref hook可以是函数式组件使用ref
  • 用useRef来创建ref

以上便是上节课的内容，接下来我们来介绍一下Fragment

Fragment

这个东西是用来干什么的呢？我们之前使用组件如果我们想要一个多级的结构，是不是一上来就得包一个div？

image-20220120165948287

你看我们写两个输入框，外面包了一个Demo组件的div，外面还有一个App组件的div。

但是如果我们不想写那么多的div怎么办呢？那么就可以用Fragment，我们来看一下：

import React, { Component, Fragment } from 'react';

export default class Demo extends Component {
  render() {
    return (
      <Fragment>
        <input type="text"/>
        <input type="text"/>
      </Fragment>
    );
  }
}

我们从react中引入Fragment，然后我们外面不包div了，我们包Fragment，那么我们来看一下效果：

image-20220120170255337

两个输入框还在，但是外面只包了一个App组件的div，但是呢我们还有一种有意思的写法：

import React, { Component } from 'react';

export default class Demo extends Component {
  render() {
    return (
      <>
        <input type="text"/>
        <input type="text"/>
      </>
    );
  }
}

我们用了一个空标签，那么我们来看一下效果：

image-20220120170535922

也是我们想要的效果，只有一个App组件的div，那么这个空标签和Fragment有什么区别呢？Fragment可以写key属性，空标签不行。

总结

  • Fragment可以使得渲染时不产生不必要的div，空标签也可以达到相同效果
  • Fragment可以且仅可以接收key值，但是空标签什么都不能接

Copyright statement：The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.

Link of this article：https://work.lynchow.com/article/extend_fragment/