对图像进行懒加载，只有当监听节点进入可视窗口内时，才开始加载，达到节省资源的效果。
主要通过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>
}
