react中图片懒加载怎么做？

在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>
``