Почему фрагменты в React 16 лучше контейнерных элементов?

В Реакте 16.2 улучшенная поддержка Fragmentsбыла добавлена. Более подробную информацию можно найти в блоге React здесь.

Мы все знакомы со следующим кодом:

render() {
  return (
    // Extraneous div element :(
    <div>
      Some text.
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.
    </div>
  );
}

Да, нам нужен контейнерный div, но это не так уж важно.

В Реакте 16.2 мы можем сделать это, чтобы избежать окружающего контейнера div:

render() {
  return (
    <Fragment>
      Some text.
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.
    </Fragment>
  );
}

В любом случае нам все еще нужен контейнерный элемент, окружающий внутренние элементы.

Мой вопрос, почему использование Fragmentпредпочтительнее? Это помогает с производительностью? Если так, то почему? Хотелось бы немного понимания.

1. Это немного быстрее и требует меньше памяти (не нужно создавать дополнительный узел DOM). Это имеет реальную выгоду только на очень больших и / или глубоких деревьях, но производительность приложений часто страдает от гибели в тысячу сокращений. Это на одно сокращение меньше.
2. Некоторые механизмы CSS, такие как Flexbox и CSS Grid, имеют особые отношения родитель-потомок, а добавление divs в середине затрудняет сохранение желаемого макета при извлечении логических компонентов.
3. Инспектор DOM менее загружен. :-)

Вы можете найти описания некоторых других вариантов использования в этой проблеме React: добавить фрагмент API, чтобы разрешить возврат нескольких компонентов из рендера

Добавление всех ответов выше есть еще одно преимущества: читабельность кода , Fragmentкомпонент поддерживает синтаксическую форму сахара, <>. Таким образом, код в вашем вопросе может быть написан легче как:

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

Согласно документам ,

В React это относится к <React.Fragment/>элементу, как в примере из предыдущего раздела. (Non-React-фреймворки, использующие JSX, могут компилироваться во что-то другое.)

Без помех, верно?

Обратите внимание, что вам все еще нужно использовать <Fragment>синтаксис, если вам нужно предоставить keyфрагмент.

• Добавленные функции невозможны раньше с JSX
• Лучшая семантическая разметка jsx. Элементы обертки используются при необходимости не потому, что они вынуждены.
• Меньшая общая разметка dom (повышенная производительность рендеринга и меньшие затраты памяти)

Это так же просто, как когда вам не нужен элемент-обертка, вы не обязаны его использовать. Хорошо иметь меньше элементов, но я думаю, что наибольшим преимуществом является возможность отображать элементы в jsx, которые раньше были невозможны, и добавление лучшего семантического значения к элементам-оберткам, потому что они теперь являются необязательными.

Это было невозможно раньше:

 <select>
    {this.renderOptions()}
 </select>

Взглянув на следующее в React 15, вы не сможете определить, нужен ли элемент-обертка:

<span>
  <h1>Hello</h1>
  {this.getContent()}
</span>

В соответствии с документом activjs.org наиболее важными потребностями, <Fragment> </Fragment>а не div, являются недопущение нарушения семантики HTML. Когда мы используем div вместо <Fragment> </Fragment>мы нарушаем семантику HTML.

Чтобы узнать больше о семантике HTML. пожалуйста, нажмите, а также в некоторых случаях, если вы используете div вместо Fragments, это будет недействительным HTML, например, посмотрите на этот код:

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

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

Фрагменты решают эту проблему.

1. Используя <React.Fragment>...</React.Fragment>, мы можем добавить родительский тег к нашим элементам JSX без добавления дополнительного узла в DOM.
2. Вы можете заменить дополнительные теги div на React.Fragment.
3. писать React.Fragment каждый раз слишком долго для вас. React.Fragment имеет сокращенный синтаксис, который вы можете использовать. это<>...</>.