React怎么做图片懒加载

组件维护 IntersectionObserver 实例

  const ioRef = useRef(
    new IntersectionObserver(/* 界面滚动回调 */(entries: Array<IntersectionObserverEntry>) => {
      entries.forEach((i: IntersectionObserverEntry) => {
        const { target, isIntersecting } = i;
        // 出现在视口
        if (isIntersecting) {
          target.setAttribute('src', target.getAttribute('data-src'));
          // 取消监视
          ioRef.current.unobserve(target);
        }
      });
    }),
  );

渲染阶段收集dom实例

let imgs = []
<img
    data-src={src}
    alt="img"
    ref={(dom: HTMLImageElement | null) => {
        if (dom) imgs.push(dom)
    }}
/>

生命周期中监听dom实例

  useEffect(() => {
    imgs.forEach((i: HTMLImageElement) => ioRef.current.observe(i))
  }, [])

销毁时候应该断开 IntersectionObserver 连接

useEffect(() => () => ioRef.current.disconnect(), [])