Создание пользовательского хука React для наблюдателей за пересечениями

Intersection Observers — мощный инструмент современной веб-разработки. Они позволяют нам наблюдать, когда элемент входит или выходит из области просмотра пользователя, включая динамические эффекты, такие как отложенная загрузка, бесконечная прокрутка или запуск анимации.

В этом руководстве мы создадим собственный хук React под названием useIntersectionObserver, который инкапсулирует логику наблюдения за элементами для пересечения. Мы также приведем несколько примеров того, как этот хук можно использовать в реальных сценариях.

Шаг 1: Создание крючка

Начнем с создания нового файла с именем useIntersectionObserver.js. Внутри этого файла мы определим наш хук useIntersectionObserver:

import { useEffect, useState, useRef } from 'react';
function useIntersectionObserver(options) {
  const [target, setTarget] = useState(null);
  const [intersecting, setIntersecting] = useState(false);
  const observer = useRef(
    new window.IntersectionObserver(([entry]) => {
      setIntersecting(entry.isIntersecting);
    }, options)
  );
  useEffect(() => {
    const currentTarget = target;
    const currentObserver = observer.current;
    if (currentTarget) {
      currentObserver.observe(currentTarget);
    }
    return () => {
      if (currentTarget) {
        currentObserver.unobserve(currentTarget);
      }
    };
  }, [target]);
  return [setTarget, intersecting];
}
export default useIntersectionObserver;

Здесь мы используем хуки useEffect и useState для создания хука с отслеживанием состояния, который отслеживает элемент target и пересекается ли он в данный момент с окном просмотра. Мы также используем хук useRef для создания ссылки на экземпляр IntersectionObserver, который мы будем использовать для наблюдения за элементом target.

Шаг 2: Использование крючка

Теперь, когда мы определили наш хук, давайте используем его в простом примере. В этом примере мы будем использовать useIntersectionObserver, чтобы определить, когда изображение входит в область просмотра, и запустить его загрузку.

import React, { useState } from 'react';
import useIntersectionObserver from './useIntersectionObserver';

function LazyImage({ src, alt }) {
  const [loaded, setLoaded] = useState(false);
  const [ref, intersecting] = useIntersectionObserver({ threshold: 0.1 });

  if (intersecting && !loaded) {
    setLoaded(true);
  }

  return (
    <img
      ref={ref}
      src={loaded ? src : ''}
      alt={alt}
    />
  );
}

export default LazyImage;

Здесь мы определили новый компонент LazyImage, который принимает свойства src и alt. Внутри компонента мы используем наш хук useIntersectionObserver, чтобы определить, когда изображение входит в область просмотра. Как только изображение пересекается с областью просмотра, мы устанавливаем состояние loaded в true, что запускает загрузку изображения.

Заключение

Intersection Observers — это мощный инструмент современной веб-разработки, который позволяет использовать широкий спектр динамических эффектов. Создав собственный хук React для наблюдения за пересечением элементов, мы можем инкапсулировать логику и упростить ее повторное использование в различных компонентах и ​​контекстах.

В этом руководстве мы прошли этапы создания простого хука useIntersectionObserver и предоставили несколько примеров того, как его можно использовать в реальных сценариях. Мы также показали, как можно настроить хук для поддержки дополнительных опций и вариантов поведения.

Я надеюсь, что этот урок был вам полезен и вдохновил вас на эксперименты с Intersection Observers в ваших собственных проектах!