懒加载React长页面-动态渲染组件

人可何晃

背景长页面在前端开发中是非常常见的。例如下图中的电商首页，楼层数据来自运营人员在后台的配置，楼层数量是不固定的，同时每个楼层可能会依赖更多翻页数据。在这种情况下，如果一次性将页面全部渲染，可想而知，我们的页面直出效率（fmp, fid）会受到影响。为了更好的用户体验，我们需要考虑在用户滚动到下一屏时，渲染下一屏的组件。设计思路假设页面预期渲染 n 个组件，每个组件均会触发请求其他接口。设计这样一个长页面，我们主要会面临以下两个问题：渲染下一屏组件的时机应该如何判断？在数据反复更新的过程中，如何让组件不重复发起数据请求？图 1一、渲染下一屏的时机1. 初始定义以首页为例，我们将楼层数据源用 homeInfo 变量保存，而实际渲染的数据用 compList 保存。另外，我们需要一个 loading 组件，该组件始终处于楼层组件的最下方。consthomeInfo=[...楼层数据];const[compList,setCompList]=useState([]);//渲染的组件数据constbottomDomRef=useRef(null);//楼层组件{compList.map((homeItem,index)=>(//根据不同的楼层渲染不同的楼层组件{renderHomeConfig(homeItem)}))}//loadingDOM//completedDOM 已经到底啦2. Loading 组件是否在视图内如图 1 所示，当 loading 组件的位置滚动到视图中时，并且如果此时还有未渲染的组件，这时便是渲染下一屏的时机。判断组件是否在视图内有两种方式，一种是调用调用Element.getBoundingClientRect\(\)[1]方法以获取 loading 元素的边界信息，进行判断，另一种是调用Intersection Observer API[2]进行判断。方法 1：getBoundingClientRect我们需要知道 窗口高度 以及 Loading 组件的高度。Element.clientHeight 元素内部的高度，包含内边距，但不包括水平滚动条、边框和外边距。Element.scrollHeight 元素内容高度的度量，包括由于溢出导致的视图中不可见内容。Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。constscrollRenderHandler=():void=>{constrect=bottomDomRef.current.getBoundingClientRect();//top是loading组件的位置consttop=rectrect.top:0;//视窗高constclientHeight=document.documentElement.clientHeight||document.body.clientHeight;if(top{document.addEventListener('scroll',scrollRenderHandler);return():void=>{document.removeEventListener('scroll',scrollRenderHandler);};},[scrollRenderHandler]);方法 2：Intersection Observer使用 react-intersection-observer 的 api 判断 loading 元素是否在视图内。//Useobjectdestructing,soyoudon'tneedtoremembertheexactorderconst{ref,inView,entry}=useInView(options);//Orarraydestructing,makingiteasytocustomizethefieldnamesconst[ref,inView,entry]=useInView(options);import{useInView}from'react-intersection-observer';const[bottomDomRef,inView]=useInView({threshold:0,});constscrollRenderHandler=():void=>{if(inView&组件没渲染完){//继续渲染}}3. 组件是否渲染完成假设一屏展示 3 个组件，类似常见分页逻辑中的 pageSize = 3，我们可以将 n 个组件分割成每 3 个 1 组，对每组依次进行渲染，并用 compGroups 保存分割的组，同时使用 groupIdx 指针来指向下一个需要渲染的组序列。exportconstsplitGroups=(homeList:any[],pageSize:number):any[]=>{constgroupsTemp=[];for(leti=0;isplitGroups(homeInfo,3),[homeInfo]);constgroupCount=compGroups.length;const[groupIdx,setGroupIdx]=useState(0);当分割好组后，如何判断组件没渲染完的问题便迎刃而解，当 groupIdx 小于 groupCount，更新 compList 和 groupIdx。if(top{if(inView&groupIdx{document.addEventListener('scroll',scrollRenderHandler);return():void=>{document.removeEventListener('scroll',scrollRenderHandler);};},[scrollRenderHandler]);exportdefaultfunctionuseDebounceany>(func:T,delay:number,depsependencyList=[],):[T,()=>void]{consttimer=useRef();constcancel=useCallback(()=>{if(timer.current){clearTimeout(timer.current);}},[]);construn=useCallback((...args)=>{cancel();timer.current=window.setTimeout(()=>{func(...args);},delay);},deps);return[runasT,cancel];}二、不重复发起数据请求1. 症结分析至此，随着屏幕滚动，我们基本完成了组件动态渲染的要求。但还有另外一个问题：随着滚动，相同的数据接口请求了多次。如上图，同一楼层的接口被请求了两遍。这意味着，在窗口滚动的过程中，我们反复更新了 compList 数据，从而导致了楼层组件重新渲染，而每个楼层组件的数据请求，是放在组件内部的，这与该楼层的唯一标识 uuid 相关，因此导致数据接口的重复请求。2. React.memoReact Top-Level API – React[3]通过上述症结我们得知，只要组件不重复渲染，便可规避掉重复请求的问题。在没有引入 React.memo 之前，使用 PureComponent 可以达到对 props 浅比较的效果，另外，我们也可以采用 shouldComponentUpdate 来进行具体的比较，从而减少组件的渲染次数。具体如：shouldComponentUpdate(nextProps, nextState)而在函数组件中，我们可以使用 React.memo ，它的使用方法非常简单，如下所示。如果不传 areEqual 则对 props 进行浅比较。若传入，则需要返回具体的比较结果 true, false 。functionMyComponent(props){/*renderusingprops*/}functionareEqual(prevProps,nextProps){/*returntrueifpassingnextPropstorenderwouldreturnthesameresultaspassingprevPropstorender,otherwisereturnfalse*/}exportdefaultReact.memo(MyComponent,areEqual);因此，我们只需要在对应的楼层组件中，将组件用 memo 进行包裹，并对比它们的唯一标识 uuid 。代码如下：importReact,{memo}from'react';typeGoodsRecommedProps={...其他props， goodsQuery：{uuid:'...'}}constGoodsRecommed:React.FC=(props)=>{...}constisEqual=(prevProps:GoodsRecommedProps,nextProps:GoodsRecommedProps):boolean=>{if(prevProps.goodsQuery.uuid!==nextProps.goodsQuery.uuid){returnfalse;}returntrue;};exportdefaultmemo(GoodsRecommed,isEqual);最后看一下效果，确实没有重复的数据请求了。总结React.memo 用于组件单位的性能优化。useCallback 根据依赖缓存第一个参数的 callback ，多用于缓存函数。useMemo 根据依赖缓存的第一个参数的返回值，多用于组件内更细粒度的某一部分性能优化。在写一个普通的长页面的过程中，如果只追求完成，那么将会非常简单，但如果想要进一步优化，那可做的事情就有很多了。参考资料[1]Element.getBoundingClientRect(): https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect[2]Intersection Observer API: https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API[3]React Top-Level API – React: https://reactjs.org/docs/react-api.html#reactmemo[4]React Top-Level API – React: https://reactjs.org/docs/react-api.html#reactmemo[5]Element.getBoundingClientRect() - Web API 接口参考 | MDN: https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect[6]IntersectionObserver API 使用教程 - 阮一峰的网络日志: http://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html[7]精读《react-intersection-observer 源码》: https://zhuanlan.zhihu.com/p/149926289[8]useCallback、useMemo 分析 & 差别: https://juejin.cn/post/6844904001998176263#heading-7[9]thebuilder/react-intersection-observer: https://github.com/thebuilder/react-intersection-observer[10]React 如何渲染大数据量的列表: https://juejin.cn/post/6844903634036064270扫内推Offer快人一步