React图片懒加载最佳指南：性能优化大招

2023-09-10 01:46:32

虚拟滚动
虚拟滚动是一种实现图片懒加载的简单而有效的方法。它通过只渲染用户当前可见的图片来减少初始页面加载时间。当用户滚动页面时，更多图片将按需加载。

实现虚拟滚动最简单的方法是使用react-virtualized库。该库提供了一个<VirtualList>组件，可以用于渲染大量数据。

import { VirtualList } from 'react-virtualized';

const MyVirtualList = () => {
  const data = [
    { id: 1, name: 'Image 1' },
    { id: 2, name: 'Image 2' },
    { id: 3, name: 'Image 3' },
  ];

  const renderRow = ({ index, style }) => {
    return (
      <div style={style}>
        {data[index].name}
      </div>
    );
  };

  return (
    <VirtualList
      width={300}
      height={300}
      rowCount={data.length}
      rowHeight={100}
      rowRenderer={renderRow}
    />
  );
};

2. 交叉观察者

交叉观察者是实现图片懒加载的另一种方法。它通过监听元素的位置来确定何时加载图片。当元素进入视口时，图片将被加载。

实现交叉观察者最简单的方法是使用react-intersection-observer库。该库提供了一个<IntersectionObserver>组件，可以用于监听元素的位置。

import { IntersectionObserver } from 'react-intersection-observer';

const MyIntersectionObserver = () => {
  const ref = useRef();

  const handleIntersection = (entries) => {
    if (entries[0].isIntersecting) {
      // Image is now visible, load it
    }
  };

  return (
    <IntersectionObserver rootMargin='100px' onIntersection={handleIntersection}>
      <img ref={ref} src="image.jpg" />
    </IntersectionObserver>
  );
};