懒加载react 组件，实现长列表页面动态渲染

需求：h5页面非常长，如果一次性全部渲染，用户分分钟就关闭页面了。所以打算考虑动态打包组件，另外还需要考虑用户刷新到下一屏幕时，在渲染一下屏数据。

动态打包文件

1、 @loadable/components
优势：

  • 支持客户端渲染，还能支持服务端渲染SSR
  • 支持 Libray splitting 库分割
  • 支持 import(`./${value}`)
  • 支持使用 Supense
对比

2、 React.lazy
React.lazy 可以用来进行代码分割，只能在客户端渲染

3、 React-loadable 不建议使用

因为 React-loadable是个 不再维护的库，不支持Webpack v4+ and Babel v7+

React.lazy、@loadable/components、React-loadable 比较

使用 @loadable/components 动态导入组件

Getting Started

import loadable from '@loadable/component'
const OtherComponent = loadable(() => import('./OtherComponent'))
function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  )
}

OtherComponent 就可以分割成另一个打包文件

测试性能

  • 打开开发者工具
  • 按Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux) 来打开命令菜单
  • 输入 render，下拉框中选择 Show Rendering。
  • 点击 render 页签，FPS Meter 前打钩。
  • 滚动列表

React如何渲染大数据量的列表

List 长列表动态渲染

动态渲染 组件

idea：页面分成两个dom，dom1用来渲染长组件，dom2用来判断是否需要更新数据。

  • 分割数组：长组件为几组数据，dom1渲染第一组数据。
  • 每组组件多少个任意，只要保证dom2在第一屏之外即可。
  • 判断这个dom2是否处于视图中
  • dom2超出视图，更新dom1的数据源

1、分割数组


const LazyComponent = ({ dataSource }) => {

/**
 * 将数组拆分成每 num 个 为一组
 * @param arr | Array
 * @param num | Int
 * @return Array
 */
const splitArray = (arr, num) => {
  const len = arr.length;
  let result = []; // eslint-disable-line
  for (let i = 0; i < len; i += num) {
    result.push(arr.slice(i, i + num));
  }
  return result;
};


const componentGroups =  useMemo(()=> splitArray(dataSource, 3),[dataSource]);



}

2、视图宽高

document.documentElement 与 document.body

一是 scrollWidth（scrollHeight），表示的是文档区的宽度（高度），比如一个网页，特别是门户网站，拖很长，就要把没有显示出来的内容都计算进去。

二是视口 viewport，就是 clientWidth，就是窗口中可显示内容的那块区域，就是我们常常看到页面上飞行广告，飞来飞去，碰到边边要反弹的那一块。``

var scrollWidth = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);

var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;

3、dom2 是否处于视图中

getBoundingClientRect 距离视图顶部的值top 如果小于视图的高度，就代表出现在视图范围

监听滚动事件，判断dom2是否处于视图中，此处useEffect 需要加第二个参数groupIdx, componentList。原因：Using React Hooks To Update when Scroll

const LazyComponent = ({ dataSource }) => {
// ...
  const [componentList, setComponentList] = useState([]);
  const bottomDomRef = useRef(null);

  useEffect(() => {
    const handleScroll = () => {
      const { top } = bottomDomRef.current.getBoundingClientRect();
      if (top < clientHeight) {
        updateComponentList();
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, [groupIdx, componentList]);


 return (
    <div>
      {
        componentList.map((itm) => <RenderComponentByType componentType={itm.componentType} />)
      }
      <div ref={bottomDomRef}> Loading </div>
    </div>
  );
 
}

3、更新dom1数据源


const updateComponentList = () => {
  if (groupIdx < groupLen) {
    setComponentList(componentList.concat(componentGroups[groupIdx]));
    setGroupIdx(groupIdx + 1);
  }
}

4、渲染第一屏数据，保证dom2 在视图之外


  useEffect(() => {
    updateComponentList();
  }, []);

5、源码：
由于eslint规则提示，所以改了一点代码，因此源码跟上述每个步骤有不同

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

import PropTypes from 'prop-types';

import loadable from '@loadable/component';

import { splitArray } from '../../utils/index';

const RenderComponentByType = loadable(() => import('../RenderComponentByType/index'));

const LazyComponent = ({ dataSource }) => {
  const clientHeight = document.documentElement.clientHeight || document.body.clientHeight; // 视窗高

  const componentGroups = useMemo(() => splitArray(dataSource, 2), [dataSource]); // 分割数组

  const groupLen = componentGroups.length;

  const [groupIdx, setGroupIdx] = useState(0);

  const [componentList, setComponentList] = useState([]); // 当前视窗，页面组件数据

  const bottomDomRef = useRef(null);

   useEffect(() => {
    const firstScreenData = componentGroups.length > 0 ? componentGroups[0] : [];
    setComponentList(firstScreenData);
    setGroupIdx(1);
  }, [componentGroups]); // 第一屏渲染

  useEffect(() => {
    const handleScroll = () => {
      const { top } = bottomDomRef.current.getBoundingClientRect();
      if (top < clientHeight && groupIdx < groupLen) {
        setComponentList(componentList.concat(componentGroups[groupIdx]));
        setGroupIdx(groupIdx + 1);
      }
    };

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, [clientHeight, componentGroups, componentList, groupIdx, groupLen]);

  return (
    <div>
      {
        componentList.map((itm) => <RenderComponentByType componentType={itm.componentType} />)
      }
      <div ref={bottomDomRef}> Loading </div>
    </div>
  );
};

LazyComponent.propTypes = {
  dataSource: PropTypes.arrayOf().isRequired,
};

export default LazyComponent;

至此，即可实现动态加载长列表组件。

如何保证 第一屏渲染时，dom2 在一屏之外

延迟 获取 dom 高度

优化后，源码：

import React, { useEffect, useState, useRef, useMemo, useCallback } from 'react';
import PropTypes from 'prop-types';
import loadable from '@loadable/component';

import { splitArray } from '../../utils/index';
import './style.scss';

const RenderComponentByType = loadable(() => import('../RenderComponentByType/index'));

const LazyComponent = ({ dataSource }) => {
  const clientHeight = document.documentElement.clientHeight || document.body.clientHeight; // 视窗高

  const componentGroups = useMemo(() => splitArray(dataSource, 2), [dataSource]); // 分割数组

  const groupLen = componentGroups.length;

  const [groupIdx, setGroupIdx] = useState(0);

  const [componentList, setComponentList] = useState([]); // 当前视窗，页面组件数据

  const bottomDomRef = useRef(null);

  const updateComponentList = useCallback(() => {
    const { top } = bottomDomRef.current.getBoundingClientRect();
    if (top < clientHeight && groupIdx < groupLen) {
      setComponentList(componentList.concat(componentGroups[groupIdx]));
      setGroupIdx(groupIdx + 1);
    }
  }, [clientHeight, componentGroups, componentList, groupIdx, groupLen]);

  useEffect(() => {
    const timer = setTimeout(() => {
      updateComponentList();
    }, 300);
    return () => {
      clearTimeout(timer);
    };
  }, [updateComponentList]);

  useEffect(() => {
    window.addEventListener('scroll', updateComponentList);
    return () => {
      window.removeEventListener('scroll', updateComponentList);
    };
  }, [updateComponentList]);

  return (
    <div>
      {
        componentList.map((itm) => <RenderComponentByType key={itm.componentOrder} dataSource={itm} />)
      }
      <div id="flagDom" ref={bottomDomRef} className="frag-dom--transparent" />
    </div>
  );
};

LazyComponent.propTypes = {
  dataSource: PropTypes.arrayOf(PropTypes.shape()).isRequired,
};

export default LazyComponent;

动态 ref

另一个做法：分为三个dom，每个dom 分别appendChild


const eleRefs = componentGroups.map(() => useRef(null));

// ...
console.log('eleRefs[nextIdx].current', eleRefs[nextIdx].current);

// ...
return (
    <div>
      {
        componentGroups.map((group, idx) => (
          <div ref={eleRefs[idx]} data-idx={idx} />
        ))
      }
    </div>
  );
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,099评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,828评论 3赞 387
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,540评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,848评论 1赞 285
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,971评论 6赞 385
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,132评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,193评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,934评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,376评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,687评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,846评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,537评论 4赞 335
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,175评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,887评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,134评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,674评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,741评论 2赞 351