懒加载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>
  );