Чому фрагменти в React 16 кращі, ніж контейнери div?

У React 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>
  );
}

Так, нам потрібен контейнер-діль, але це не так вже й велика угода.

У React 16.2 ми можемо це зробити, щоб уникнути навколишнього поділу контейнера:

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/>елемента, як у прикладі з попереднього розділу. (Нереактивні рамки, які використовують JSX, можуть компілюватись до чогось іншого.)

Безладно, правда?

Зауважте, що вам все ж потрібно використовувати <Fragment>синтаксис, якщо вам потрібно надати keyфрагмент.

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

Це так просто, як коли вам не потрібен елемент обгортки, ви не змушені його використовувати. Маючи менше елементів, це здорово, але я думаю, що найбільша перевага полягає в тому, щоб передати елементи в jsx, що раніше не було можливо, і додати кращі семантичні значення елементам обгортки, оскільки вони зараз необов’язкові.

Раніше це було неможливо:

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

Поглянувши на наступне в Реакт 15, ви не можете сказати, потрібен елемент обгортки чи ні:

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

Згідно з документами reactjs.org, найважливішими потребами <Fragment> </Fragment>замість діл є уникати порушення семантики HTML. Коли ми використовуємо div, замість цього <Fragment> </Fragment>ми порушуємо семантику HTML.

Щоб дізнатися більше про html семантику. будь ласка , натисніть , а також бувають випадки , коли , якщо ви використовуєте DIV замість фрагментів він буде недійсним 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 має короткий синтаксис, який ви можете використовувати. це є<>...</>.