Перейти до основного вмісту

Колекції

Для того щоб відрендерити колекцію однотипних елементів, використовується метод Array.prototype.map(), callback-функція якого, для кожного елемента колекції повертає JSX-розмітку. Отже, отримуємо масив React-елементів, який можна рендерити.

const favouriteBooks = [
  { id: "id-1", name: "JS for beginners" },
  { id: "id-2", name: "React basics" },
  { id: "id-3", name: "React Router overview" },
  { id: "id-4", name: "Redux in depth" },
];

const BookList = ({ books }) => {
  return (
    <ul>
      {books.map(book => (
        <li>{book.name}</li>
      ))}
    </ul>
  );
};

const App = () => {
  return (
    <div>
      <BookList books={favouriteBooks} />
    </div>
  );
};

Ключі​

Під час виконання коду з прикладу вище спливе попередження про те, що для елементів списку потрібен ключ. React не може відрізнити елементи в колекції, таким чином, перемальовуючи всю колекцію повністю у разі будь-яких змін.

Ключ (key) — це спеціальний рядковий проп, який потрібно задати під час створення елементів колекції.

Елементи всередині колекції повинні бути забезпечені ключами, щоб мати стабільну ідентичність. React використовує ключі, щоб визначити, які з елементів в колекції необхідно створити і відрендерити знову, а не використовувати елементи з попереднього рендеру. Таким чином ми уникаємо перестворення всіх елементів колекції щоразу, коли щось змінюється.

Ключі повинні бути:

  • Унікальні – ключ елемента повинен бути унікальним лише серед його сусідів. Немає сенсу у глобально унікальних ключах.
  • Стабільні – ключ елемента не повинен змінюватися з часом, зі зміною порядку елементів або після оновлення сторінки.
інформація

Індекси масиву унікальні, проте вони не стабільні – при перетасовуванні колекції ключі змінюються. Дата і час – унікальні, але не стабільні, оскільки постійно збільшуються. Таким чином, під час кожного рендеру створюються нові ключі. Використання випадкового числа рівносильно тому, що ключі взагалі не використовуються, оскільки випадкові числа не є унікальними або стабільними.

Найкращий спосіб задати ключ – використовувати статичний рядок, який однозначно ідентифікує елемент списку серед інших. Найчастіше як ключі використовуються ідентифікатори об'єктів, створених базою даних, – постійне, незмінне значення. Але також підійде будь-яке унікальне значення якоїсь властивості об'єкта.

const favouriteBooks = [
  { id: "id-1", name: "JS for beginners" },
  { id: "id-2", name: "React basics" },
  { id: "id-3", name: "React Router overview" },
  { id: "id-4", name: "Redux in depth" },
];

const BookList = ({ books }) => (
  <ul>
    {books.map(book => (
      <li key={book.id}>{book.name}</li>
    ))}
  </ul>
);

Якщо об'єкти масиву не мають унікальних значень властивостей і колекція не редагується, тобто у користувача немає можливості видалити або ще якось змінити порядок елементів, крім додавання нових, можна використовувати індекси масиву.

const favouriteBooks = [
  { name: "JS for beginners" },
  { name: "React basics" },
  { name: "React Router overview" },
  { name: "Redux in depth" },
];

const BookList = ({ books }) => (
  <ul>
    {books.map((book, index) => (
      <li key={index}>{book.name}</li>
    ))}
  </ul>
);
Індекси як ключі

Використання індексів для ключів – це крайній випадок. В переважній більшості даних будуть унікальні ідентифікатори або будь-які інші властивості.

Додаткові матеріали​