Introduction and Application of React Fragment

Preface to the table of contents Motivation of Fragments Introduction and Application of React Fragment < React.Fragment > And < > Difference

Preface

When batch adding elements to the DOM tree, a good practice is to create an document. createDocumentFragment, first batch adding elements to the
On DocumentFragment, DocumentFragment is added to the DOM tree, which reduces the number of DOM operations without creating a new element.

Similar to DocumentFragment, React also has the concept of Fragment, and its use is very similar. Prior to React 16, Fragment was created through the extension package react-addons-create-fragment, while in React 16, Fragment was created through < React.Fragment > < /React.Fragment > Create 'Fragment' directly.

Motivation of Fragments

A common pattern is that the component returns a list of 1 child elements. Take this React code fragment as an example:

class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}

< Columns / > Multiple elements need to be returned for the rendered HTML to be valid. If in < Columns / > If the parent div is used in render () of, the generated HTML will not be valid.

class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    );
  }
}

Get 1 < Table / > Output:

<table>
  <tr>
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>

The emergence of Fragments solves this problem.

Introduction and Application of React Fragment

The React. Fragment component enables multiple elements to be returned in the render () method without creating additional DOM elements. A common pattern is that one component returns multiple elements. Fragments allows you to group child lists without adding additional nodes to DOM.

It is understood that when we define components, the outermost wrapped div in return often does not want to render to the page, so we need our Fragment component. Just like vue < template > < / template > .

render() {
  return (
    <React.Fragment>
      Some text.
      <h2>A heading</h2>
    </React.Fragment>
  );
}

You can also use its abbreviated grammar < > < / > .

render() {
  return (
    <>
      Some text.
      <h2>A heading</h2>
    </>
  );
}

In addition, react 16, render support to return arrays, know this feature of the people are not a few. This 1 feature can already reduce unnecessary node nesting.

import React from 'react';

export default function () {
    return [
        <div>1</div>,
        <div>2</div>,
        <div>3</div>
    ];
}

< React.Fragment > And < > Difference

< > < / > Syntax cannot accept key values or attributes, < React.Fragment > Yes.

Use explicit < React.Fragment > Fragments of syntax declarations may have key. One usage scenario is to map a collection to an Fragments array-for example, create a description list:

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        //  No `key` , React  Will emit 1 Key warnings 
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

key is the only property that can be passed to Fragment. Support for other attributes, such as events, may be added in the future.

Note: Abbreviated form < > < / > However, some front-end tools are not well supported at present, and projects created with create-react-app may not compile. So it's normal to encounter this situation.