用React实现一个简单的虚拟列表

import React, {
    CSSProperties,
    useEffect,
    useRef,
    useState,
    useCallback,
} from "react";
import "./index.css";

interface IProps<T extends { key: React.Key }> {
    height?: CSSProperties["height"];
    width?: CSSProperties["width"];
    dataSource: T[];
    itemHeight?: number;
    cacheNumber?: number;
    listItemRender?: (item: T) => React.ReactNode;
}

export const VirtualList: <T extends { key: React.Key }>(
    props: IProps<T>
) => React.ReactNode = (props) => {
    const {
        height = "500px",
        dataSource = [],
        width = "400px",
        itemHeight = 32,
        cacheNumber = 10,
        listItemRender,
    } = props;

    /** 虚拟列表外层容器 */
    const containerRef = useRef<HTMLDivElement>(null);

    /** 真正用于存放虚拟列表项的容器 */
    const listItemsContainerRef = useRef<HTMLDivElement>(null);

    /** 用于撑开滚动条的容器高度（数据项个数 * 每个数据项高度） */
    const [scrollerContainerHeight, setScrollerContainerHeight] =
        useState<number>(0);

    /** 虚拟列表渲染的真实数据 */
    const [renderData, setRenderData] = useState<(typeof dataSource)[number][]>(
        []
    );

    /** 渲染数据区域偏移量 */
    const [renderAreaOffset, setRenderAreaOffset] = useState<number>(0);

    /** 监听滚动条变化，触发计算渲染数据以及渲染区域偏移量 */
    const handleScroll = useCallback(() => {
        /** 渲染元素个数（可视区域可容纳最大元素数量 + 缓冲区元素数量） */
        const renderDataNum =
            Math.ceil((containerRef.current?.clientHeight || 0) / itemHeight) +
            cacheNumber;

        /** 渲染元素起始索引 */
        let renderDataStartIndex =
            Math.floor((containerRef.current?.scrollTop || 0) / itemHeight) -
            cacheNumber;

        if (renderDataStartIndex < 0) {
            renderDataStartIndex = 0;
        }

        setRenderData(
            dataSource.slice(
                renderDataStartIndex,
                renderDataStartIndex + renderDataNum
            )
        );

        setRenderAreaOffset(renderDataStartIndex * itemHeight);
    }, [cacheNumber, dataSource, itemHeight]);

    useEffect(() => {
        setScrollerContainerHeight(dataSource.length * itemHeight);
        handleScroll();
    }, [dataSource, handleScroll, itemHeight]);

    return (
        <div
            className="virtual-list-container"
            ref={containerRef}
            style={{ height, width }}
            onScroll={handleScroll}
        >
            <div style={{ height: `${scrollerContainerHeight}px` }}></div>
            <div
                className="virtual-list-items-container"
                ref={listItemsContainerRef}
                style={{
                    width: "100%",
                    transform: `translate(0,${renderAreaOffset}px)`,
                }}
            >
                {renderData.map((item) => (
                    <div style={{ height: `${itemHeight}px` }} key={item.key}>
                        {listItemRender
                            ? listItemRender(item)
                            : typeof item === "object"
                                ? JSON.stringify(item)
                                : (item as string)}
                    </div>
                ))}
            </div>
        </div>
    );
};

.virtual-list-container {
    overflow: auto;
    position: relative;
}

.virtual-list-items-container {
    position: absolute;
    top: 0;
    overflow: hidden;
}

import './App.css'

import { VirtualList } from './components/VirtualList'

interface ListItemData {
  key: React.Key,
  id: string | number
  title: string
  imgSrc: string
  desc: string
}


const ListItem = (item: ListItemData) => {
  return (
    <div style={{ padding: '5px', width: '100%', boxSizing: 'border-box' }}>
      <div
        style={{ border: '1px solid #f0f0f0', boxShadow: '0 1px 2px -2px rgba(0,0,0,.16), 0 3px 6px 0 rgba(0,0,0,.12), 0 5px 12px 4px rgba(0,0,0,.09)', display: 'flex', alignItems: 'center', columnGap: 10 }}>

        <img src={item.imgSrc} style={{ height: 100 }} />
        <div style={{ display: 'flex', flexDirection: 'column',rowGap: 10  }}>
          <div style={{ fontWeight: 'bold' }}>{item.title}</div>
          <div>{item.desc}</div>
        </div>
      </div>


    </div>
  )
}


function App() {
  return (
    <div>
      <VirtualList<ListItemData> listItemRender={ListItem} itemHeight={120} dataSource={new Array(200).fill(0).map((_, index) => ({
        key: index,
        id: index,
        title: `标题_${index}`,
        imgSrc: 'https://img14.360buyimg.com/n1/jfs/t1/83129/30/18124/355324/626b8c95Ea76bb2d9/b7c73d677df0c57d.jpg',
        desc: 'fumofumo'
      }))} />

    </div>
  )
}

export default App