React 图片懒加载实现方法：使用 react-lazyload 库

在 React 中实现图片懒加载可以使用 react-lazyload 库。该库提供了一个 LazyLoad 组件，可以将需要懒加载的图片包装起来，在图片进入可视区域时才加载。

使用步骤如下：

安装 react-lazyload 库：npm install react-lazyload --save
在需要懒加载的图片组件上使用 LazyLoad 组件进行包装：

import LazyLoad from 'react-lazyload';

function MyComponent() {
  return (
    <div>
      <LazyLoad>
        <img src='path/to/image' alt='image' />
      </LazyLoad>
    </div>
  );
}

可以通过设置 LazyLoad 组件的 props 来自定义懒加载行为，例如：

threshold：设置图片距离可视区域多少像素时开始加载，默认为 0。
height：设置图片高度，如果不设置则使用图片本身的高度。
once：设置图片只加载一次，之后不再重复加载。

<LazyLoad threshold={200} height={200} once>
  <img src='path/to/image' alt='image' />
</LazyLoad>