ReactJS 图片懒加载实现： 使用 Skeleton 占位符

可以使用 React 的 useState 和 useEffect 钩子来实现这个功能。首先，我们需要一个状态来记录图片是否已经加载完成。然后，我们使用 useEffect 钩子来监听图片加载事件，一旦图片加载完成，就将状态设置为 true。最后，我们使用条件渲染来展示图片或骨架屏。

以下是一个简单的实现：

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

function Image({ src, alt }) {
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    const img = new Image();
    img.src = src;
    img.onload = () => setLoaded(true);
  }, [src]);

  return (
    <>
      {!loaded && <Skeleton />}  
      <img src={src} alt={alt} style={{ display: loaded ? 'block' : 'none' }} />
    </>
  );
}

function Skeleton() {
  return <div className='skeleton' />;
}

在上面的代码中，我们使用 useState 来创建了一个名为 loaded 的状态，初始值为 false。在 useEffect 钩子中，我们创建了一个新的 Image 对象，设置其 src 属性为传入的 src 值，并监听其 onload 事件。一旦图片加载完成，就会触发 onload 事件，我们就可以将 loaded 状态设置为 true。

在返回的 JSX 中，我们使用条件渲染来展示图片或骨架屏。如果 loaded 状态为 false，就展示骨架屏；否则，展示图片。我们使用 style 属性来动态设置图片的 display 属性，如果 loaded 为 true，就将其设置为 block，否则设置为 none。

最后，我们还定义了一个简单的 Skeleton 组件来展示骨架屏。你可以根据自己的需要自定义这个组件的样式。