react列表懒加载

目录：

前言：

效果：

代码实现：

---

前言：

懒加载也称按需加载，初次渲染时只渲染部分数据，用户下滑到一定区域的时候再在请求下一页的数据。这里需要知道可视区域高度、每条数据的渲染高度、页面滚动距离、数据请求距离（n条数据*每条数据高度）

效果：

列表懒加载

代码实现：

第一步需要知道可视区域的屏幕高度、每条数据渲染时的固定高度，

import React, { useState } from 'react';
import './index.less';

export default function Index() {
    // 数据
    const [data, setData] = useState(new Array(20).fill(0).map((_, index) => `${index + 1}`));
    // 初始配置
    const screenHeight = 700; // 屏幕可视区域高度
    const renderItemHei