需求：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 动态导入组件
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 前打钩。
- 滚动列表
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>
);
网友评论