如何在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;

以上是两种常用的方法来实现懒加载图片或组件，可以根据具体需求选择适合的方法来实现懒加载功能。