react-lazyload

react-lazyload是一个用于实现图片和组件的懒加载的React库。它可以延迟加载页面上的图片，当图片即将进入可视区域时再加载，以提高页面加载速度和性能。

react-lazyload的基本用法如下：

1. 首先，安装react-lazyload库：

npm install react-lazyload

2. 在需要使用懒加载的组件文件中，导入react-lazyload库：

import LazyLoad from 'react-lazyload';

3. 使用LazyLoad组件包裹需要懒加载的图片或组件：

<LazyLoad>
  <img src="path_to_image.jpg" alt="Lazy loaded image" />
</LazyLoad>

在上面的示例中，`<img>`元素将在进入可视区域时才会被加载。

4. 可以通过设置LazyLoad组件的属性来进行更多的配置。以下是一些常用的属性：

- `once`：设置为true时，图片只会加载一次，默认为false。
- `height`：指定占位符元素的高度，可以防止页面因图片加载而发生抖动，默认为100。
- `offset`：指定图片进入可视区域前的偏移量，单位为像素，默认为0。
- `placeholder`：指定一个占位符元素，可以是一个加载中的UI。

<LazyLoad once height={200} offset={100} placeholder={<div>Loading...</div>}>
  <img src="path_to_image.jpg" alt="Lazy loaded image" />
</LazyLoad>

以上就是使用react-lazyload实现图片和组件懒加载的基本用法。你可以根据项目需求进行进一步的配置和样式调整。