Освойте списки и ключи в React
Рендеринг списков в React прост, но сделать это правильно — непросто.
Многие разработчики используют индекс массива в качестве ключа. Это ошибка. Она приводит к багам и снижению производительности.
Вот как следует работать с динамическими данными в React.
Как React использует списки
React использует метод map() для преобразования массивов в элементы пользовательского интерфейса. Когда вы используете map(), React превращает каждую единицу данных в компонент.
Роль ключей
React использует Virtual DOM. Когда данные меняются, React сравнивает новые данные со старыми. Этот процесс называется reconciliation (согласованием).
Ключи выступают в роли уникальных идентификаторов. Они сообщают React, какой именно элемент изменился, переместился или был удален.
Почему использовать индекс в качестве ключа опасно
Использование индекса (0, 1, 2...) в качестве ключа вызывает три основные проблемы:
- Ошибки состояния компонентов: если вы отсортируете список, поля ввода или чекбоксы могут отображать данные не того элемента.
- Падение производительности: React не может отследить, какой элемент есть какой. Он часто перерисовывает весь список вместо одного конкретного элемента.
- Визуальные баги: ваш интерфейс может выглядеть правильно, но внутренняя логика нарушится при перемещении элементов.
Как правильно использовать ключи
Чтобы ваше приложение оставалось быстрым и стабильным, следуйте этим правилам:
- Используйте уникальные ID: всегда используйте идентификаторы из вашей базы данных (например, UUID или первичный ключ).
- Никогда не используйте
Math.random(): генерация ключей во время рендеринга заставляет React пересоздавать каждый элемент при каждом обновлении. Это убивает производительность. - Сохраняйте стабильность ключей: ключ должен оставаться неизменным для одного и того же фрагмента данных на протяжении всего его жизненного цикла.
Сравнение одним взглядом
| Характеристика | Использование индекса | Использование уникального ID |
|---|---|---|
| Стабильность | Нестабильно | Высокая стабильность |
| Производительность | Низкая | Оптимальная |
| Безопасность состояния | Небезопасно | На 100% безопасно |
Резюме для разработчиков
Используйте метод map(). Передавайте уникальный, стабильный ID в проп key. Избегайте использования индекса массива для любого списка, который может изменяться, сортироваться или фильтроваться.