带有React & Hooks的IntersectionObserver

import React, { useRef, useEffect, useState } from 'react';

function useIntersectionObserver(options) {
  const [isIntersecting, setIsIntersecting] = useState(false);
  const targetRef = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        setIsIntersecting(entry.isIntersecting);
      },
      options
    );

    if (targetRef.current) {
      observer.observe(targetRef.current);
    }

    return () => {
      if (targetRef.current) {
        observer.unobserve(targetRef.current);
      }
    };
  }, [options]);

  return [targetRef, isIntersecting];
}

function MyComponent() {
  const [targetRef, isIntersecting] = useIntersectionObserver({
    rootMargin: '0px',
    threshold: 0.5
  });

  return (
    <div ref={targetRef}>
      <h1>{isIntersecting ? 'Visible' : 'Not visible'}</h1>
    </div>
  );
}