Concis组件库封装——LazyLoad懒加载

懒加载组件，支持任意元素进行延迟加载，可以在SPA单页应用首页渲染时减少非可视区的DOM渲染，加快首屏渲染效率，大致用法：

<LazyLoad><div><span>需要被懒加载的一些元素</span>.......</div>
</LazyLoad>

这一期的文档比较简单，主要就是支持懒加载包裹元素，没有很多的API，如下：

组件源码：

import React, { FC, memo, useEffect, useState, createRef } from 'react';interface LazyLoadProps {children?: any;/*** @description 延迟加载* @default 0ms*/delay?: number;
}const LazyLoad: FC<LazyLoadProps> = (props) => {const { children, delay } = props;const [showEl, setShowEl] = useState(false);const lazyRef = createRef();let io: IntersectionObserver; //观察者useEffect(() => {io = new IntersectionObserver((entries) => elementObverse(entries));io.observe(lazyRef.current as Element);}, []);const elementObverse = (entries: Array<IntersectionObserverEntry>) => {//监听函数entries.forEach((entry: IntersectionObserverEntry) => {if (entry.isIntersecting) {if (delay) {setTimeout(() => {setShowEl(true);}, delay);} else {setShowEl(true);}}});};return (<div className="lazyLoad" ref={lazyRef as any}>{showEl && children}</div>);
};export default memo(LazyLoad);

主要使用了IntersectionObserver这个类来监听懒加载的元素是否在可视区，来决定加载实现的。

import {LazyLoad} from 'react-view-ui';

然后顺便一起记录一下IntersectionObserver这个API的使用吧。

Intersection Observer 的概念和用法

Intersection Observer API提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法，可以自动“观察”元素是否可见，可见的本质是目标元素与视口产生一个交叉区域，所以这个 API 叫做“交叉观察器”
Intersection Observer API 允许你配置一个回调函数，每当目标(target)元素与设备视窗或者其他指定元素发生交集的时候执行。设备视窗或者其他元素我们称它为根元素或根(root)。通常，您需要关注文档最接近的可滚动祖先元素的交集更改，如果元素不是可滚动元素的后代，则默认为设备视窗。如果要观察相对于根(root)元素的交集，请指定根(root)元素为null

创建 IntersectionObserver 对象

var intersectionObserver = new IntersectionObserver(callback, option);

当一个 IntersectionObserver 对象被创建时，其被配置为监听根中一段给定比例的可见区域。一旦 IntersectionObserver 被创建，则无法更改其配置，所以一个给定的观察者对象只能用来监听可见区域的特定变化值；然而，你可以在同一个观察者对象中配置监听多个目标元素。

callback 回调函数
当目标元素的可见性变化时，就会调用观察器的 callback 回调函数，回调函数的参数是一个数组，每个成员都是一个 IntersectionObserverEntry 对象

IntersectionObserverEntry 对象属性：

time：可见性发生变化的时间，是一个高精度时间戳，单位为毫秒
target：被观察的目标元素，是一个 DOM 节点对象
rootBounds：根元素的矩形区域的信息，getBoundingClientRect()
方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回 null
boundingClientRect：目标元素的矩形区域的信息
intersectionRect：目标元素与视口（或根元素）的交叉区域的信息
intersectionRatio：目标元素的可见比例，即 intersectionRect 占 boundingClientRect
的比例，完全可见时为 1，完全不可见时小于等于0
isIntersecting：目标元素当前是否可见

配置对象 option

root：指定目标元素所在的容器节点（即根元素），该元素必须是目标元素的祖先节点。如果未传入值或值为 null，则默认使用顶级文档的视窗
rootMargin：定义根元素的 margin，用来扩展或缩小 rootBounds 这个矩形的大小，从而影响
intersectionRect 交叉区域的大小。它使用CSS的定义方法，比如10px 20px 30px 40px，表示
top、right、bottom 和 left 四个方向的值
threshold：决定了什么时候触发回调函数。它是一个数组，每个成员都是一个门槛值，默认为[0]，即交叉比例（intersectionRatio）达到0时触发回调函数

由于懒加载设计，我的定义是整个视窗，因此我在源代码里没有加入option的配置，因此是null。

感谢阅读~~~~~

Concis组件库线上链接：http://react-view-ui.com:92
github：https://github.com/fengxinhhh/Concis
npm：https://www.npmjs.com/package/concis