资源懒加载

对图像进行懒加载，只有当监听节点进入可视窗口内时，才开始加载，达到节省资源的效果。
主要通过Web API(IntersectionObserver)实现。
主要思路：

1、初始资源置为空，不展示；
2、创建一个可监听节点interRef；
3、若interRef进入指定区域内，则给图像赋值，开始加载资源；

import { useRef } from 'react'
import { useIntersection } from 'react-use'

function Demo() {
const [imgSrc, setImgSrc] = useState('') // 图像资源地址
const interRef = useRef() // 绑定监听节点

useEffect(() => {
    if (intersection && intersection.isIntersecting) { // 监听节点进入可视区
    setImgSrc(xxx) // 图像地址赋值为实际地址
    }
}, [intersection])

const intersection = useIntersection(interRef, {
    root: null, // 指定根元素（目标元素的父元素），未指定则默认浏览器视窗
    rootMargin: '0px', // 根元素的外边距，类似于css的margin属性"top right bottom left"
    threshold: 1, // target和root相交程度达到该值时触发回调，1表示targe完全出现在root中时才会回调
})
return <div>
    <div ref={interRef}></div>
    {imgSrc && <img src={imgSrc} alt='' />}
</div>
}

Intersection Observer 完全解读

IntersectionObserver