Списки и ключи элементов

Списки в Preact строятся на основе массивов данных и рендерятся с помощью метода map. Каждый элемент массива преобразуется в JSX-элемент. Этот подход позволяет динамически отображать коллекции данных, будь то строки, объекты или сложные структуры.

import { h } from 'preact';

const fruits = ['Яблоко', 'Банан', 'Вишня'];

function FruitList() {
  return (
    <ul>
      {fruits.map(fruit => <li>{fruit}</li>)}
    </ul>
  );
}

В примере выше массив fruits преобразуется в список <ul>, где каждый фрукт становится отдельным <li>.

Значение ключей (keys)

Ключи — уникальные идентификаторы элементов списка, используемые Preact для оптимизации повторного рендера. При изменении массива ключи позволяют Preact точно определить, какие элементы добавились, удалились или изменились, избегая ненужного пересоздания компонентов.

Основные принципы использования ключей:

  • Ключ должен быть уникален в пределах одного списка.
  • Лучше использовать стабильные идентификаторы, а не индекс массива, особенно при изменении порядка элементов.
  • Отсутствие ключей может привести к неожиданным багам и снижению производительности.
const fruits = [
  { id: 1, name: 'Яблоко' },
  { id: 2, name: 'Банан' },
  { id: 3, name: 'Вишня' }
];

function FruitList() {
  return (
    <ul>
      {fruits.map(fruit => <li key={fruit.id}>{fruit.name}</li>)}
    </ul>
  );
}

Здесь key={fruit.id} гарантирует корректное сопоставление каждого элемента при обновлении массива.

Отличие индексов от уникальных идентификаторов

Использование индекса массива в качестве ключа (key={index}) может работать в простых случаях, но при изменении порядка элементов или удалении элементов это приведёт к неправильному обновлению DOM. Например:

const fruits = ['Яблоко', 'Банан', 'Вишня'];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit, index) => <li key={index}>{fruit}</li>)}
    </ul>
  );
}

Если удалить первый элемент массива, Preact будет считать, что оставшиеся элементы сместились, и перерендерит их некорректно. Стабильный уникальный идентификатор решает эту проблему.

Вложенные списки и ключи

При работе с вложенными структурами важно задавать ключи на каждом уровне:

const data = [
  { id: 1, category: 'Фрукты', items: ['Яблоко', 'Банан'] },
  { id: 2, category: 'Овощи', items: ['Морковь', 'Помидор'] }
];

function NestedList() {
  return (
    <div>
      {data.map(group => (
        <div key={group.id}>
          <h3>{group.category}</h3>
          <ul>
            {group.items.map((item, index) => (
              <li key={index}>{item}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

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

Обновление и удаление элементов в списках

Preact использует алгоритм виртуального DOM для минимизации операций с реальным DOM. При изменении массива важно сохранять ключи:

const [fruits, setFruits] = useState([
  { id: 1, name: 'Яблоко' },
  { id: 2, name: 'Банан' },
  { id: 3, name: 'Вишня' }
]);

function removeFruit(id) {
  setFruits(fruits.filter(fruit => fruit.id !== id));
}

function FruitList() {
  return (
    <ul>
      {fruits.map(fruit => (
        <li key={fruit.id}>
          {fruit.name} <button onCl ick={() => removeFruit(fruit.id)}>Удалить</button>
        </li>
      ))}
    </ul>
  );
}

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

Итоговые рекомендации по спискам и ключам

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

Использование этих практик позволяет создавать эффективные, производительные и предсказуемые списки в Preact, снижая вероятность ошибок при работе с динамическими данными.

Оглавление