M

MLOG

Українська

Опануйте процес узгодження в React. Дізнайтеся, як правильне використання 'key' оптимізує рендеринг списків, запобігає помилкам та підвищує продуктивність. Посібник для розробників.

Розблокування продуктивності: Глибоке занурення в ключі узгодження React для оптимізації списків

У світі сучасної веб-розробки створення динамічних користувацьких інтерфейсів, що швидко реагують на зміни даних, є першочерговим завданням. React, з його компонентною архітектурою та декларативною природою, став світовим стандартом для створення таких інтерфейсів. В основі ефективності React лежить процес, що називається узгодженням (reconciliation), який використовує віртуальний DOM. Однак навіть найпотужніші інструменти можна використовувати неефективно, і поширеною сферою, де розробники, як початківці, так і досвідчені, стикаються з труднощами, є рендеринг списків.

Ви, ймовірно, безліч разів писали код на кшталт data.map(item => <div>{item.name}</div>). Це здається простим, майже тривіальним. Проте за цією простотою криється критично важливий аспект продуктивності, ігнорування якого може призвести до повільної роботи додатків та незрозумілих помилок. Рішення? Невеликий, але потужний проп: key.

Цей вичерпний посібник проведе вас через глибоке занурення в процес узгодження React та незамінну роль ключів у рендерингу списків. Ми розглянемо не лише «що», але й «чому» — чому ключі є важливими, як їх правильно обирати та які значні наслідки має неправильний вибір. Наприкінці ви отримаєте знання для написання більш продуктивних, стабільних та професійних додатків на React.

Розділ 1: Розуміння узгодження React та віртуального DOM

Перш ніж ми зможемо оцінити важливість ключів, ми повинні спочатку зрозуміти фундаментальний механізм, який робить React швидким: узгодження, що працює на базі віртуального DOM (VDOM).

Що таке віртуальний DOM?

Взаємодія безпосередньо з об'єктною моделлю документа (DOM) браузера є обчислювально дорогою. Кожного разу, коли ви щось змінюєте в DOM — наприклад, додаєте вузол, оновлюєте текст або змінюєте стиль — браузеру доводиться виконувати значний обсяг роботи. Йому може знадобитися перерахувати стилі та компонування для всієї сторінки, процес, відомий як reflow та repaint. У складному, керованому даними додатку, часті прямі маніпуляції з DOM можуть швидко знизити продуктивність до мінімуму.

React вводить абстрактний шар для вирішення цієї проблеми: віртуальний DOM. VDOM — це легке, збережене в пам'яті представлення реального DOM. Уявіть його як креслення вашого UI. Коли ви наказуєте React оновити UI (наприклад, змінивши стан компонента), React не торкається реального DOM негайно. Замість цього він виконує наступні кроки:

  1. Створюється нове дерево VDOM, що представляє оновлений стан.
  2. Це нове дерево VDOM порівнюється з попереднім деревом VDOM. Цей процес порівняння називається "diffing".
  3. React визначає мінімальний набір змін, необхідних для перетворення старого VDOM у новий.
  4. Ці мінімальні зміни потім групуються разом і застосовуються до реального DOM в одній ефективній операції.

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

Розділ 2: Проблема з рендерингом списків без ключів

Тепер давайте подивимося, де ця елегантна система може зіткнутися з проблемами. Розглянемо простий компонент, який рендерить список користувачів:


function UserList({ users }) {
  return (
    <ul>
      {users.map(user => (
        <li>{user.name}</li>
      ))}
    </ul>
  );
}

Коли цей компонент вперше рендериться, React будує дерево VDOM. Якщо ми додамо нового користувача в *кінець* масиву `users`, алгоритм порівняння React впорається з цим елегантно. Він порівнює старий і новий списки, бачить новий елемент в кінці і просто додає новий `<li>` до реального DOM. Ефективно і просто.

Але що станеться, якщо ми додамо нового користувача на початок списку або змінимо порядок елементів?

Припустимо, наш початковий список:

І після оновлення він стає:

Без будь-яких унікальних ідентифікаторів React порівнює два списки на основі їхнього порядку (індексу). Ось що він бачить:

Це неймовірно неефективно. Замість того, щоб просто вставити один новий елемент для "Charlie" на початку, React виконав дві мутації та одну вставку. Для великого списку або для елементів списку, які є складними компонентами з власним станом, ця непотрібна робота призводить до значного погіршення продуктивності і, що важливіше, до потенційних помилок зі станом компонентів.

Ось чому, якщо ви запустите наведений вище код, консоль розробника вашого браузера покаже попередження: "Warning: Each child in a list should have a unique 'key' prop." React явно каже вам, що йому потрібна допомога для ефективного виконання своєї роботи.

Розділ 3: Проп `key` приходить на допомогу

Проп key — це підказка, яка потрібна React. Це спеціальний рядковий атрибут, який ви надаєте при створенні списків елементів. Ключі надають кожному елементу стабільну та унікальну ідентичність між повторними рендерингами.

Давайте перепишемо наш компонент `UserList` з ключами:


function UserList({ users }) {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Тут ми припускаємо, що кожен об'єкт `user` має унікальну властивість `id` (наприклад, з бази даних). Тепер давайте повернемося до нашого сценарію.

Початкові дані:


[{ id: 'u1', name: 'Alice' }, { id: 'u2', name: 'Bob' }]

Оновлені дані:


[{ id: 'u3', name: 'Charlie' }, { id: 'u1', name: 'Alice' }, { id: 'u2', name: 'Bob' }]

З ключами процес порівняння React набагато розумніший:

  1. React дивиться на дочірні елементи `<ul>` у новому VDOM і перевіряє їхні ключі. Він бачить `u3`, `u1` та `u2`.
  2. Потім він перевіряє дочірні елементи попереднього VDOM та їхні ключі. Він бачить `u1` та `u2`.
  3. React знає, що компоненти з ключами `u1` та `u2` вже існують. Йому не потрібно їх змінювати; йому просто потрібно перемістити відповідні вузли DOM на їхні нові позиції.
  4. React бачить, що ключ `u3` новий. Він створює новий компонент і вузол DOM для "Charlie" і вставляє його на початок.

Результатом є одна вставка в DOM та деяке перевпорядкування, що набагато ефективніше, ніж численні мутації та вставка, які ми бачили раніше. Ключі забезпечують стабільну ідентичність, дозволяючи React відстежувати елементи між рендерингами, незалежно від їхньої позиції в масиві.

Розділ 4: Вибір правильного ключа - Золоті правила

Ефективність пропа `key` повністю залежить від вибору правильного значення. Існують чіткі найкращі практики та небезпечні антипатерни, про які варто знати.

Найкращий ключ: Унікальні та стабільні ID

Ідеальний ключ — це значення, яке унікально та постійно ідентифікує елемент у списку. Майже завжди це унікальний ID з вашого джерела даних.

Відмінні джерела для ключів включають:


// ДОБРЕ: Використання стабільного, унікального ID з даних.
<div>
  {products.map(product => (
    <ProductItem key={product.sku} product={product} />
  ))}
</div>

Антипатерн: Використання індексу масиву як ключа

Поширеною помилкою є використання індексу масиву як ключа:


// ПОГАНО: Використання індексу масиву як ключа.
<div>
  {items.map((item, index) => (
    <ListItem key={index} item={item} />
  ))}
</div>

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

Помилка управління станом:

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


function UnstableList() {
  const [items, setItems] = React.useState([{ id: 1, text: 'First' }, { id: 2, text: 'Second' }]);

  const handleAddItemToTop = () => {
    setItems([{ id: 3, text: 'New Top' }, ...items]);
  };

  return (
    <div>
      <button onClick={handleAddItemToTop}>Add to Top</button>
      {items.map((item, index) => (
        <div key={index}>
          <label>{item.text}: </label>
          <input type="text" />
        </div>
      ))}
    </div>
  );
}

Спробуйте виконати цю уявну вправу:

  1. Список рендериться з "First" та "Second".
  2. Ви вводите "Hello" у перше поле введення (те, що для "First").
  3. Ви натискаєте кнопку "Add to Top".

Що ви очікуєте, що станеться? Ви очікуєте, що з'явиться нове, порожнє поле для "New Top", а поле для "First" (яке все ще містить "Hello") переміститься вниз. Що насправді відбувається? Поле введення на першій позиції (індекс 0), яке все ще містить "Hello", залишається. Але тепер воно пов'язане з новим елементом даних, "New Top". Стан компонента введення (його внутрішнє значення) прив'язаний до його позиції (key=0), а не до даних, які він повинен представляти. Це класична і заплутана помилка, спричинена індексними ключами.

Якщо ви просто зміните `key={index}` на `key={item.id}`, проблему буде вирішено. React тепер правильно асоціюватиме стан компонента зі стабільним ID даних.

Коли прийнятно використовувати індексний ключ?

Існують рідкісні ситуації, коли використання індексу є безпечним, але ви повинні задовольнити всі ці умови:

  1. Список статичний: він ніколи не буде перевпорядковуватися, фільтруватися або мати елементи, додані/видалені з будь-якого місця, крім кінця.
  2. Елементи в списку не мають стабільних ID.
  3. Компоненти, що рендеряться для кожного елемента, є простими і не мають внутрішнього стану.

Навіть тоді часто краще згенерувати тимчасовий, але стабільний ID, якщо це можливо. Використання індексу завжди повинно бути свідомим вибором, а не стандартним рішенням.

Найгірший варіант: `Math.random()`

Ніколи, ніколи не використовуйте `Math.random()` або будь-яке інше недетерміноване значення для ключа:


// ЖАХЛИВО: Не робіть цього!
<div>
  {items.map(item => (
    <ListItem key={Math.random()} item={item} />
  ))}
</div>

Ключ, згенерований `Math.random()`, гарантовано буде різним при кожному рендерингу. Це говорить React, що весь список компонентів з попереднього рендерингу був знищений, і був створений абсолютно новий список абсолютно інших компонентів. Це змушує React демонтувати всі старі компоненти (знищуючи їхній стан) і монтувати всі нові. Це повністю нівелює мету узгодження і є найгіршим можливим варіантом для продуктивності.

Розділ 5: Просунуті концепції та поширені питання

Ключі та `React.Fragment`

Іноді вам потрібно повернути кілька елементів з колбеку `map`. Стандартний спосіб зробити це — за допомогою `React.Fragment`. Коли ви це робите, `key` повинен бути розміщений на самому компоненті `Fragment`.


function Glossary({ terms }) {
  return (
    <dl>
      {terms.map(term => (
        // Ключ ставиться на Fragment, а не на дочірні елементи.
        <React.Fragment key={term.id}>
          <dt>{term.name}</dt>
          <dd>{term.definition}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

Важливо: Скорочений синтаксис `<>...</>` не підтримує ключі. Якщо ваш список вимагає фрагментів, ви повинні використовувати явний синтаксис `<React.Fragment>`.

Ключі повинні бути унікальними лише серед суміжних елементів

Поширеною помилкою є думка, що ключі повинні бути глобально унікальними у всьому вашому додатку. Це неправда. Ключ повинен бути унікальним лише в межах свого безпосереднього списку суміжних елементів.


function CourseRoster({ courses }) {
  return (
    <div>
      {courses.map(course => (
        <div key={course.id}>  {/* Ключ для курсу */} 
          <h3>{course.title}</h3>
          <ul>
            {course.students.map(student => (
              // Цей ключ студента повинен бути унікальним лише в межах списку студентів цього конкретного курсу.
              <li key={student.id}>{student.name}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

У наведеному вище прикладі два різні курси можуть мати студента з `id: 's1'`. Це абсолютно нормально, оскільки ключі оцінюються в межах різних батьківських елементів `<ul>`.

Використання ключів для навмисного скидання стану компонента

Хоча ключі в першу чергу призначені для оптимізації списків, вони виконують глибшу функцію: вони визначають ідентичність компонента. Якщо ключ компонента змінюється, React не намагатиметься оновити існуючий компонент. Замість цього він знищить старий компонент (і всіх його нащадків) і створить абсолютно новий з нуля. Це демонтує старий екземпляр і монтує новий, ефективно скидаючи його стан.

Це може бути потужним і декларативним способом скидання компонента. Наприклад, уявіть компонент `UserProfile`, який завантажує дані на основі `userId`.


function App() {
  const [userId, setUserId] = React.useState('user-1');

  return (
    <div>
      <button onClick={() => setUserId('user-1')}>View User 1</button>
      <button onClick={() => setUserId('user-2')}>View User 2</button>
      
      <UserProfile key={userId} id={userId} />
    </div>
  );
}

Розміщуючи `key={userId}` на компоненті `UserProfile`, ми гарантуємо, що кожного разу, коли `userId` змінюється, весь компонент `UserProfile` буде знищений, і буде створений новий. Це запобігає потенційним помилкам, коли стан з профілю попереднього користувача (наприклад, дані форми або завантажений контент) може залишатися. Це чистий і явний спосіб керування ідентичністю та життєвим циклом компонента.

Висновок: Написання кращого коду на React

Проп `key` — це набагато більше, ніж спосіб прибрати попередження в консолі. Це фундаментальна інструкція для React, що надає критично важливу інформацію, необхідну для ефективної та правильної роботи його алгоритму узгодження. Опанування використання ключів є ознакою професійного розробника React.

Підсумуємо ключові висновки:

Засвоївши ці принципи, ви не тільки будете писати швидші та надійніші додатки на React, але й глибше зрозумієте основні механізми бібліотеки. Наступного разу, коли ви будете проходитися по масиву для рендерингу списку, приділіть пропу `key` ту увагу, на яку він заслуговує. Продуктивність вашого додатка — і ви самі в майбутньому — будуть вам за це вдячні.

Розблокування продуктивності: Глибоке занурення в ключі узгодження React для оптимізації списків | MLOG