后端一次性返回十万条数据，前端如何处理(二)

后端一次性返回十万条数据，前端如何处理(二)

道阻且长，行而不辍，未来可期

方法二、盒子滚动触底加载（滚动到底，再加载一堆）
实现思路：
先将数据分堆，
利用鼠标滚轮事件，判断当滚动条触底的时候就加载一堆数据。

触底是有一个公式的
scrollTop + clientHeight >= scrollHeight

 //分堆：将数据分成一堆50个,便于观察
  function groupsFn(arr: Array<string>) {
    let i = 0;
    let res = [];
    while (i < arr.length) {
      res.push(arr.slice(i, i + 50));
      i += 50;
    }
    return res;
  }

	let mixture = [];
    for (let i = 48; i <= 57; i++) {
      const firstChar = String.fromCharCode(i); // 获取数字 0-9 中的字符
      for (let j = 65; j <= 90; j++) {
        const secondChar = String.fromCharCode(j); // 获取字母 A-Z 中的字符
        for (let k = 48; k <= 57; k++) {
          const thirdChar = String.fromCharCode(k); // 再次获取数字 0-9 中的字符
          mixture.push(`${firstChar}${secondChar}${thirdChar}`);
        }
      }
    }
    //获取分堆后的数组
    let mixtureArr: string[][] = groupsFn(mixture);
    
   //分堆触底加载
    let Index = 0;
    function loadData(mixtureArr: string[][]) {
      if (Index < mixtureArr.length - 1) {
        setData((x) => [...x, ...mixtureArr[Index - 1]]);
        Index++;
      }
    }


	loadData(mixtureArr);

    function scrollDown() {
      let wrapper = wrapperRef.current;
      if (wrapper) {
        const scrollHeight = wrapper.scrollHeight;
        const scrollTop = wrapper.scrollTop;
        const clientHeight = wrapper.clientHeight;
		//scrollHeight - 10浏览器在渲染滚动条时有一定的误差
        if (scrollTop + clientHeight >= scrollHeight - 10) {
          loadData(mixtureArr);
        }
      }
    }

完整的demo在dataByScroll分支
https://github.com/1linan/scroll_demo