Списки и ключи
Тема дорожной карты · React
Списки и ключи в React — это паттерн рендеринга массивов элементов с помощью .map() внутри JSX с присвоением каждому элементу стабильного уникального пропса key, позволяющего React эффективно согласовывать обновления DOM. Проп key — это специальный атрибут React, помогающий reconciler'у определять, какие элементы списка изменились, добавились или удалились, что позволяет точечно изменять DOM вместо полного перерендеринга поддерева. Ключи должны быть стабильными уникальными идентификаторами из ваших данных — например, идентификаторами из базы данных, — а не индексами массива, которые могут вызывать незаметные баги состояния при перестановке или фильтрации списка. React выводит предупреждение в консоль, когда элементы списка рендерятся без ключей, сигнализируя о потенциальной проблеме производительности и корректности в компоненте. Понимание взаимодействия списков и ключей с алгоритмом согласования React необходимо для построения производительных, безошибочных динамических UI во фронтенд-приложениях.
Как это работает
Списки и ключи — это JavaScript с XML-разметкой внутри выражений. Компилятор Babel/SWC превращает <div className="x">{value}</div> в React.createElement("div", {className: "x"}, value). Фигурные скобки {} переключают между JSX и JavaScript-выражениями. Атрибуты пишут camelCase (onClick, className) — JSX это JavaScript, не HTML. Условный рендер — тернарники или &&; списки — .map() со стабильным key для reconciliation.
Когда применять
JSX — для render-вывода каждого компонента: идиоматичный React. Альтернатива (React.createElement) работает, но читается хуже на нетривиальном UI. Используйте && для "рендерить X, если условие"; тернарники для "рендерить X или Y"; никогда || для conditional render (0 || <X/> рендерит 0, не <X/>). Используйте Fragment (<>...</>), когда возвращаете несколько siblings без лишнего wrapper div.
Типичные ошибки
Ловушки Списки и ключи: for вместо htmlFor и class вместо className (HTML-привычки утекают); рендер массивов без стабильного key (React предупреждает; переупорядочивание ломает DOM); индекс массива как key при переупорядочивании (state приписывается не туда); тяжёлые вычисления прямо в JSX (пересчитываются каждый рендер — выносите в useMemo или helper). Мысленно «разворачивайте» JSX в createElement, чтобы дебажить рендер-баги.