React useIntersectionObserver钩子

观察给定元素的可见性变化。

• 使用useState()钩子来存储给定元素的交叉观察值。
• 使用给定的options和适当的回调函数创建一个IntersectionObserver，以更新isIntersecting状态变量。
• 使用useEffect()钩子，在组件挂载时调用IntersectionObserver.observe()，并使用IntersectionObserver.unobserve()在卸载时进行清理。

const useIntersectionObserver = (ref, options) => {
  const [isIntersecting, setIsIntersecting] = React.useState(false);

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

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

    return () => {
      observer.unobserve(ref.current);
    };
  }, []);

  return isIntersecting;
};

const MyApp = () => {
  const ref = React.useRef();
  const onScreen = useIntersectionObserver(ref, { threshold: 0.5 });

  return (
    <div>
      <div style={{ height: '100vh' }}>向下滚动</div>
      <div style={{ height: '100vh' }} ref={ref}>
        <p>{onScreen ? '元素在屏幕上。' : '继续滚动！'}</p>
      </div>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(
  <MyApp />
);

ReactDOM.createRoot(document.getElementById('root')).render(
  <MyApp />
);