前言

最近使用React在开发公司的一个官网，由于有一页中图片有点多，就想到图片懒加载，这个时候就很头疼了。在Vue中直接使用v-lazy就可以实现图片懒加载了，可是React没有这种已经封装好的自定义指令，那只好自己来开发啦！

代码实现

利用自定义Hook来实现

import React, { useRef, useEffect } from 'react';

const useLazyLoad = (src, alt) => {
  const ref = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const img = entry.target;
          img.src = src;
          observer.disconnect();
        }
      });
    });

    observer.observe(ref.current);

    return () => observer.disconnect();
  }, [src]);

  return <img ref={ref} alt={alt} />;
};

export default useLazyLoad;

然后在组件中使用这个Hook：

import React from 'react';
import useLazyLoad from './useLazyLoad';

const Image = ({ src, alt }) => {
    const image = useLazyLoad(src, alt);
    return image; 
};

export default Image;

替代img标签使用：

<Image src={} alt={} />

END

希望这篇文章可以帮助到有需要的小伙伴们，有问题可以评论或私信我呀🤞🤞

React中编写v-lazy指令，实现图片懒加载（附代码）

前言

代码实现

END