三羊

三羊的小站

React 16学习(二)

March 02, 2018/「 react 」/ Edit on Github ✏️

文章目录

上篇大致说了 react16 的结构，今天来看看 react16 中新增的 Fragment。

react16 中新增的可以渲染的类型：fragment和string。

Fragments

在 react16 中，component的render方法现在可以返回一个数组了，而在 react16 之前只能返回一个ReactElement，一般被div包裹着。在实际使用时，页面会输出一些很多没有用处的div，增加了 dom 结构的嵌套层数，不利于页面快速的渲染。

react16 之前 

class Demo extends React.Component {
  render() {
    return (
      <div>
        {[1, 2, 3].map(v => (
          <a key={v}>{`链接${v}`}</a>
        ))}
      </div>
    )
  }
}

react16

可以直接返回一个数组，而不需要外层包裹一个div，这个必须包含key

class Demo extends React.Component {
  render() {
    return [1, 2, 3].map(v => <a key={v}>{`链接${v}`}</a>)
  }
}

可以使用 fragments，而不需要申明key

class Demo extends React.Component {
  render() {
    return (
      <>
        {[1, 2, 3].map(v => (
          <a>{`链接${v}`}</a>
        ))}
      </>
    )
  }
}

或者

class Demo extends React.Component {
  render() {
    const Fragment = React.Fragment
    return (
      <Fragment>
        {[1, 2, 3].map(v => (
          <a>{`链接${v}`}</a>
        ))}
      </Fragment>
    )
  }
}

Strings

react16 也支持直接在render中输出一个字符串。

class Demo extends React.Component {
  render() {
    return "这里是一个字符串"
  }
}

若有收获，小额鼓励