Использование множественных refs в массиве с React Hooks

Быстрый ответ

Для управления несколькими ссылками на элементы в массиве компонентов с использованием хуков используйте хук useRef и функцию .map(). Создайте отдельный реф для каждого элемента вот таким образом:

const MyComponent = () => {
  const elementsCount = 10; // Количество элементов
  const refs = useRef([...Array(elementsCount)].map(() => createRef()));

  return (
    <>
      {refs.current.map((ref, index) => (
        <div key={index} ref={ref}>Элемент {index}</div>
      ))}
    </>
  );
};

Уникальные рефы обеспечат вам возможность обращаться к каждому элементу в DOM индивидуально.

Контроль над динамическими массивами рефов

Для того чтобы синхронизировать массив ссылок с изменяющимся массивом элементов, используйте хук useEffect:

useEffect(() => {
  refs.current = refs.current.slice(0, items.length); // Обрезаем рефы до текущего числа элементов
}, [items.length]);

Это беспечивает актуальность референций, соответствующую количеству элементов.

Время применения колбек-рефов

Если требуется выполнить манипуляции с DOM сразу после рендеринга компонента, потребуются колбек-рефы:

const itemsRef = items.map(() => useRef(null)); // Инициализация массива рефов

const setCallbackRef = (index) => (element) => {
  itemsRef[index].current = element;
  // Лучшее место для DOM-операций
};

// В JSX
{items.map((item, index) => (
  <div key={index} ref={setCallbackRef(index)}>...</div>
))}

Визуализация

Представьте плантацию роботов 🤖, каждый из которых заботится о конкретном дереве в саду:

const orchard = trees.map(() => useRef(null));
// Теперь у каждого дерева есть свой отдельный реф (смотритель)

При помощи рефов каждому "роботу" можно указать индивидуальные задачи по уходу за своим "деревом":

orchard[2].current // Взаимодействие с третьим "роботом", обслуживающем третье дерево

Создавая реф, мы устанавливаем уникальную связь между элементом и функцией, которая обрабатывает его.

Очистка и сортировка: работа с рефами

React вызывает функции с инициализацией рефов с аргументом null при размонтировании компонентов. Важно поддерживать порядок и чистоту:

useEffect(() => {
  return () => {
    refs.current.forEach(ref => {
      ref.current = null; // Очистка рефов
    });
  };
}, []);

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

<ChildComponent key={item.uniqueId} ref={(el) => (itemsRef.current[index] = el)} />

Уникальный id помогает React отслеживать перемещение элементов.

Продвинутое использование: улучшаем наш опыт

Если управление множеством рефов кажется сложным, вот несколько подходов для оптимизации:

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

• Работа с null рефами: При получении рефа проверяйте его на null, чтобы избежать ошибок и ускорить выполнение операций для опциональных элементов:

refs.current.filter(ref => ref.current).forEach(ref => {
  // Здесь выполняем необходимые операции
});

Стилизация: применение стилей с помощью рефов

Использование стилей посредством индексации или ссылок позволяет точно настраивать внешний вид каждого элемента:

{items.map((item, index) => (
  <div key={index} ref={refs.current[index]} style={{ width: `${index * 10}%` }}>...</div>
))}

Таким образом, мы можем динамически изменять размер каждого элемента в зависимости от его индекса.

Полезные материалы

1. Справочник API Hooks – React — подробное описание хука useRef в официальной документации React.
2. Паттерны React — советы и приёмы по работе с рефами в массивах компонентов.
3. Как работают хуки useEffect (с примерами) — практические примеры использования хуков useRef и useEffect.
4. Передача Рефов – React — продвинутые методы передачи рефов в React.
5. Формы – React — управление формами в React при использовании контролируемых компонентов.