如何使用React實現一個圖片懶加載組件

要實現一個圖片懶加載組件，可以以下面的步驟來使用React：

1. 創建一個React組件來表示圖片懶加載組件，可以命名為LazyImage。

2. 在LazyImage組件中，維護一個狀態來表示圖片是否已經加載，例如isLoading。

3. 在LazyImage組件中，使用useEffect鉤子函數來監聽滾動事件，判斷圖片是否在視窗內。

4. 如果圖片在視窗內，將isLoading狀態設置為true，加載圖片。

5. 在LazyImage組件中，使用img標簽來渲染圖片，根據isLoading狀態決定是否顯示圖片。

下面是一個簡單的LazyImage組件的示例代碼：

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

const LazyImage = ({ src, alt }) => {
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      if (isInViewport()) {
        setIsLoading(true);
        window.removeEventListener('scroll', handleScroll);
      }
    };

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  const isInViewport = () => {
    const rect = document.getElementById('lazy-image').getBoundingClientRect();
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  };

  return (
    <img
      id="lazy-image"
      src={isLoading ? src : ''}
      alt={alt}
    />
  );
};

export default LazyImage;

在使用LazyImage組件時，只需傳入圖片的src和alt屬性即可：

<LazyImage src="https://example.com/image.jpg" alt="Example Image" />

這樣就實現了一個簡單的圖片懶加載組件。您可以根據具體的需求對LazyImage組件進行定制和擴展。