用 React 巧妙实现虚拟列表，告别性能焦虑！

前端

2024-02-13 12:42:36

虚拟列表的魅力

在现代Web开发中，构建具有长列表或动态数据集合的应用程序已变得十分常见。然而，当处理大量数据时，传统列表组件往往会遇到性能瓶颈，导致滚动缓慢、页面卡顿等问题。

虚拟列表应运而生，它通过只渲染可见部分的数据来优化性能。它巧妙地利用滚动事件，动态加载和卸载数据，从而使长列表应用也能像短列表一样流畅滚动。

React 实现虚拟列表

React 是构建高效用户界面的首选工具，其强大的声明式编程范式和虚拟 DOM 机制使其非常适合实现虚拟列表。

1. 基本虚拟列表组件

首先，我们实现一个基本虚拟列表组件。这个组件使用 React 的 useEffect 钩子和 useCallback 钩子来监听滚动事件和更新可见数据。

import React, { useEffect, useState, useCallback } from 'react';

const VirtualList = ({ data }) => {
  const [startIndex, setStartIndex] = useState(0);
  const [endIndex, setEndIndex] = useState(10);

  const updateVisibleData = useCallback(() => {
    // 计算可见数据的起始和结束索引
    const startIndex = Math.floor(scrollTop / itemHeight);
    const endIndex = startIndex + Math.ceil(visibleHeight / itemHeight);

    // 更新可见数据
    setStartIndex(startIndex);
    setEndIndex(endIndex);
  }, [scrollTop, itemHeight, visibleHeight]);

  useEffect(() => {
    // 监听滚动事件
    window.addEventListener('scroll', updateVisibleData);

    // 组件卸载时移除监听器
    return () => {
      window.removeEventListener('scroll', updateVisibleData);
    };
  }, [updateVisibleData]);

  return (
    <ul>
      {data.slice(startIndex, endIndex).map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
};

2. 高级虚拟列表组件

接下来，我们实现一个更高级的虚拟列表组件，它支持无限滚动和固定表头。

import React, { useEffect, useState, useCallback, useRef } from 'react';

const InfiniteVirtualList = ({ data }) => {
  const [startIndex, setStartIndex] = useState(0);
  const [endIndex, setEndIndex] = useState(10);
  const [loading, setLoading] = useState(false);
  const listRef = useRef(null);

  const updateVisibleData = useCallback(() => {
    // 计算可见数据的起始和结束索引
    const startIndex = Math.floor(scrollTop / itemHeight);
    const endIndex = startIndex + Math.ceil(visibleHeight / itemHeight);

    // 更新可见数据
    setStartIndex(startIndex);
    setEndIndex(endIndex);
  }, [scrollTop, itemHeight, visibleHeight]);

  const handleScroll = useCallback(() => {
    // 检查是否需要加载更多数据
    if (listRef.current.scrollHeight - listRef.current.scrollTop - listRef.current.clientHeight < 100 && !loading) {
      setLoading(true);

      // 加载更多数据
      setTimeout(() => {
        // 更新数据
        setData([...data, ...newData]);

        // 重置加载状态
        setLoading(false);
      }, 500);
    }

    updateVisibleData();
  }, [data, loading, updateVisibleData]);

  useEffect(() => {
    // 监听滚动事件
    listRef.current.addEventListener('scroll', handleScroll);

    // 组件卸载时移除监听器
    return () => {
      listRef.current.removeEventListener('scroll', handleScroll);
    };
  }, [handleScroll]);

  return (
    <div ref={listRef} style={{ overflow: 'auto', height: '100vh' }}>
      <ul>
        {data.slice(startIndex, endIndex).map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      {loading && <div>加载中...</div>}
    </div>
  );
};