React中使用LazyBuilder实现页面懒加载方法一

前言：

        在一个表格中，需要展示100条数据，当每条数据里面需要承载的内容很多，需要渲染的元素也很多的时候，容易造成页面加载的速度很慢，不能给用户提供很好的体验时，懒加载是优化页面加载速度的方法之一。

策略：

        前端在接受到api返回的数据的时候，可以先根据数据总的条数进行遍历，给每一项初始化简单的dom进行渲染占位，通过IntersectionObserver对每一项元素进行监听，当初始dom出现在页面视口的时候，需要替换掉初始dom，渲染真实dom，同样，在初始dom隐藏在页面视口后，我们再去替换掉真实dom，渲染初始dom。这样可以实现：只有出现在视口内的元素才渲染真实的dom，在视口以外的元素都渲染初始dom，首次加载多少个真实dom，取决于可视区域跟初始dom的高度。

React中使用LazyBuilder实现页面懒加载方法二

与方法二不同之处：

方法一：元素出现在可视区域内，即渲染真实dom，一旦消失在可视区域内，即渲染初始dom

方法二：元素只要出现在可视区域内一次，即渲染真实dom，并且取消对该dom的监听，只需加载一次

LazyBuilder.jsx

import React, { Component, createRef } from