Процедура рендеринга массивов в React

Введение

В этой статье рассказывается о рендеринге массивов в React и о лучших практиках для рендеринга разных элементов внутри компонентов.

Одно из преимуществ использования современных языков веб-разработки, включая JavaScript, заключается в возможности быстро автоматизировать генерирование блоков кода HTML.

Использование циклов в отношении массивов или объектов означает, что для каждого элемента код HTML нужно писать только один раз. Более того, любые будущие изменения также потребуется вносить только один раз.

Рендеринг множества элементов

Чтобы выполнить рендеринг множества элементов JSX в React, вы можете применить к массиву цикл с методом .map() и возвращением одного элемента.

В примере ниже мы применяем цикл к массиву reptiles и получаем элемент li для каждого элемента в массиве. Вы можете использовать этот метод, если хотите вывести один элемент для каждого элемента массива:

function ReptileListItems() {
  const reptiles = ["alligator", "snake", "lizard"];

  return reptiles.map((reptile) => <li>{reptile}</li>);
}

Итоговый результат будет выглядеть следующим образом:

Output
- alligator
- snake
- lizard

В следующем примере мы увидим, почему лучше добавлять уникальный ключ к списку элементов, рендеринг которых выполняет массив.

Рендеринг набора элементов внутри компонента

В этом примере, как и в предыдущем, мы применяем к массиву цикл и создаем серию компонентов элемента списка.

Для начала обновите код, чтобы использовать компонент <ol> для хранения элементов <li>. Компонент <ol> создаст упорядоченный список элементов:

function ReptileList() {
  const reptiles = ["alligator", "snake", "lizard"];

  return (
    <ol>
      {reptiles.map((reptile) => (
        <li>{reptile}</li>
      ))}
    </ol>
  );
}

Однако, если вы посмотрите на консоль, вы увидите предупреждение о том, что каждый дочерний элемент массива или итератора должен иметь уникальный ключ.

Данное предупреждение появляется, потому что при попытке рендеринга коллекции внутри компонента необходимо добавить ключ.

В React уникальный ключ используется для того, чтобы определить, для каких компонентов в коллекции требуется повторный рендеринг. Добавление уникального ключа позволяет React не выполнять повторный рендеринг всего компонента целиком при каждом обновлении.

На этом шаге мы выполним рендеринг нескольких элементов внутри компонента и добавим уникальный ключ. Обновите код, чтобы добавить ключ к элементам списка и убрать предупреждение:

function ReptileList() {
  const reptiles = ['alligator', 'snake', 'lizard'];

  return (
    <ol>
      {reptiles.map(reptile => (
        <li key={reptile}>{reptile}</li>
      ))}
    </ol>
  );
}

После добавления ключа предупреждение больше не будет отображаться внутри консоли.

В следующем примере вы увидите, как выполнять рендеринг прилегающих элементов без распространенной синтаксической ошибки.

Рендеринг прилегающих элементов

Для рендеринга одного или нескольких элементов компонента в JSX необходимо заключить их в оболочку.

В этом примере мы сначала возвращаем список элементов без применения цикла к массиву:

function ReptileListItems() {
  return (
    <li>alligator</li>
    <li>snake</li>
    <li>lizard</li>
  );
}

При этом в консоли выводится постоянная ошибка:

Чтобы исправить эту ошибку, необходимо заключить блок элементов li в оболочку. Для списка их можно заключить в элемент ol или ul:

function ReptileListItems() {
  return (
  <ol>
    <li>alligator</li>
    <li>snake</li>
    <li>lizard</li>
  </ol>
  );
}

Прилегающие элементы <li> теперь заключены в тег <ol>, и ошибка больше отображаться не будет.

В следующем разделе список выводится в оболочке с использованием компонента fragment.

Рендеринг прилегающих элементов с помощью React.fragment

До React v16.2 была возможность заключать блоки компонентов в элементе <div>. При этом получается приложение с большим количеством тегов div, и такие приложения часто называли «суп div».

Для устранения этой проблемы для React был выпущен новый компонент fragment:

Если требуется выполнить рендеринг списка внутри тега, но вы не хотите использовать теги div, вы можете использовать React.Fragment:

function ReptileListItems() {
  return (
  <React.Fragment>
     <li>alligator</li>
     <li>snake</li>
     <li>lizard</li>
  </React.Fragment>
  );
}

Код после рендеринга будет содержать только элементы li, и компонент React.Fragment не будет отображаться в коде.

Также в случае с React.fragment следует отметить, что ключ добавлять не требуется.

Можно отметить, что React.fragment писать сложнее, чем добавлять теги <div>. К счастью, команда React разработала более короткий синтаксис для представления этого компонента. Можно использовать <> </> вместо <React.Fragment></React.Fragment>:

function ReptileListItems() {
  return (
 <>
    <li>alligator</li>
    <li>snake</li>
    <li>lizard</li>
 </>
  );
}

Заключение

В этой статье мы рассмотрели разные примеры рендеринга массивов в приложении React.

При рендеринге элемента внутри другого компонента следует использовать уникальный ключ и заключать элементы в элемент оболочки.

В зависимости от сценария использования вы можете создавать простые списки, заключенные внутри компонента fragment, для которого не требуется ключ.

Чтобы узнать больше о лучших практиках React, подпишитесь на серию Программирование на React.js на DigitalOcean.