懒加载是一种对网页性能优化的方式，而图片懒加载当一个网站加载图片过多时就需要懒加载的协助，从而提高页面的加载速度，减轻服务器的压力，节省流量。
懒加载是延迟加载一些资源（如：图片）的一种策略，以用户的行为和导航模式为依据，判断图片在被需要的时候才加载。通常来说，仅当这些资源滚动到视图中才被加载 。
第一步、安装组件
npm i --save react-lazy-load-image-component
第二部、直接上代码（知道也懒得看文字）
import React from 'react' import { LazyLoadImage } from "react-lazy-load-image-component"; export default function Imglan() { const imglist = [ "https://scpic.chinaz.net/files/pic/pic9/202009/apic27858.jpg", "https://pic1.zhimg.com/v2-e915686432f3bb45dd43705ec445352d_r.jpg", "https://www.euweb.cn/wp-content/uploads/2016/12/302636-106.jpg", "https://scpic.chinaz.net/files/pic/pic9/202009/apic27858.jpg", ] return ( <div style={{ width: "60%" }}> {imglist.map((img) => ( <LazyLoadImage src={img} width={600} height={400} alt="Image Alt" /> ))} </div> ) }
