Fragments减少DOM的渲染

Fragments组件使用

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <React.Fragment id={'box'}>
        <h1>通过容器组件Fragment 可以减少DOM元素的渲染</h1>
        <h2>Fragment 不会真实渲染出来</h2>
      </React.Fragment>
    )
  }
}

export default App;

•  React.Fragment 不会渲染出任何DOM元素
• 给  React.Fragment 添加  key 属性就不能使用语法糖形式

语法糖形式

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <>
        <h1>通过容器组件Fragment 可以减少DOM元素的渲染</h1>
        <h2>Fragment 不会真实渲染出来</h2>
      </>
    )
  }
}

export default App;

•  React.Fragment 可以使用空标签 <> 的形式来简写