如何在React中實現懶加載圖片或組件

在React中實現懶加載圖片或組件的方法有多種，以下是一種常用的方法：

1. 使用React.lazy和Suspense組件實現懶加載組件：

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

export default App;

2. 使用Intersection Observer API實現懶加載圖片：

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

function LazyImage({ src, alt }) {
  const imgRef = useRef();
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.unobserve(imgRef.current);
        }
      });
    });

    observer.observe(imgRef.current);

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

  return <img ref={imgRef} src={isVisible ? src : ''} alt={alt} />;
}

export default LazyImage;

以上是兩種常用的方法來實現懶加載圖片或組件，可以根據具體需求選擇適合的方法來實現懶加載功能。