React LazyLoad 基础用法解析与实现原理-优快云博客

React LazyLoad 基础用法解析与实现原理

react-lazyload Lazy load your component, image or anything matters the performance. 项目地址: https://gitcode.com/gh_mirrors/re/react-lazyload

什么是 React LazyLoad

React LazyLoad 是一个用于实现懒加载（延迟加载）的 React 组件库。它可以帮助我们优化页面性能，特别是对于包含大量图片或复杂组件的长页面。通过延迟加载视口外的内容，可以显著减少初始页面加载时间和资源消耗。

基础用法示例解析

让我们通过分析示例代码来理解 React LazyLoad 的基本用法：

import React, { Component } from 'react';
import LazyLoad from '../../src/';
import Widget from '../components/Widget';
import Operation from '../components/Operation';
import { uniqueId } from '../utils';

这段代码引入了必要的依赖：

React 基础库
LazyLoad 组件
示例中使用的 Widget 和 Operation 组件
用于生成唯一 ID 的工具函数

组件状态初始化

constructor() {
  super();

  const id = uniqueId();
  this.state = {
    arr: Array.apply(null, Array(20)).map((a, index) => {
      return {
        uniqueId: id,
        once: [6, 7].indexOf(index) > -1
      };
    })
  };
}

这里初始化了一个包含 20 个元素的数组，每个元素都是一个对象，包含：

uniqueId: 用于标识组件的唯一 ID
once: 布尔值，表示是否只加载一次（示例中索引为 6 和 7 的元素设置为 true）

更新状态方法

handleClick() {
  const id = uniqueId();

  this.setState({
    arr: this.state.arr.map(el => {
      return {
        ...el,
        uniqueId: id
      };
    })
  });
}

这个方法会更新所有元素的 uniqueId，强制重新渲染所有组件，用于演示 LazyLoad 的更新行为。

渲染方法解析

render() {
  return (
    <div className="wrapper">
      <Operation type="normal" onClickUpdate={::this.handleClick} />
      <div className="widget-list">
        {this.state.arr.map((el, index) => {
          return (
            <LazyLoad once={el.once} key={index} height={200} offset={[-100, 0]}>
              <Widget once={el.once} id={el.uniqueId} count={index + 1} />
            </LazyLoad>
          );
        })}
      </div>
    </div>
  );
}

这是核心渲染逻辑，重点在于 LazyLoad 组件的使用：

Operation 组件提供更新按钮
遍历 state.arr 渲染 20 个 LazyLoad 包裹的 Widget 组件
LazyLoad 的关键属性：
- once: 控制是否只加载一次（滚动出视口再回来不会重新加载）
- height: 预估的组件高度（用于计算是否进入视口）
- offset: 触发加载的偏移量（[-100,0] 表示上方 100px 就开始预加载）