React中基于Redux动态状态结合Intersection Observer的图片懒加载问题

你的问题出在当src属性更新后，即使重新初始化了IntersectionObserver，对于已经在视口中的图片，观察者不会主动触发回调（因为元素的交叉状态没有发生变化），导致新的图片地址无法加载。

修复后的LazyImage组件 #

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

const LazyImage = ({ alt, src }) => {
    const [imageSrc, setImageSrc] = useState(null);
    const imgRef = useRef(null);

    // 当src属性变化时，重置图片地址
    useEffect(() => {
        setImageSrc(null);
    }, [src]);

    useEffect(() => {
        if (!imgRef.current) return;

        const observer = new IntersectionObserver(
            (entries) => {
                entries.forEach((entry) => {
                    // 使用isIntersecting判断是否进入视口，比intersectionRatio更可靠
                    if (entry.isIntersecting) {
                        setImageSrc(src);
                        observer.unobserve(entry.target);
                    }
                });
            },
            { rootMargin: '0px', threshold: 0.1 }
        );

        const currentElement = imgRef.current;
        observer.observe(currentElement);

        // 手动检查元素当前是否处于视口中，避免观察者未触发回调的情况
        const currentEntry = observer.takeRecords()[0];
        if (currentEntry?.isIntersecting) {
            setImageSrc(src);
            observer.unobserve(currentElement);
        }

        return () => {
            observer.unobserve(currentElement);
        };
    }, [src]);

    return <img ref={imgRef} src={imageSrc} alt={alt} />;
};

export default LazyImage;

关键修改点 #

1. 使用isIntersecting替代intersectionRatio：
   这是IntersectionObserver的标准属性，更准确地判断元素是否进入视口，避免因阈值设置导致的判断误差。

2. 手动检查当前交叉状态：
   通过observer.takeRecords()获取元素当前的交叉记录，若元素已经在视口中，直接加载新的图片地址，确保src更新后即使元素未发生位置变化也能触发加载。

3. 优化清理逻辑：
   存储当前DOM元素的引用，避免在清理时因组件更新导致的引用失效问题。

额外注意事项 #

• 确保你在map中使用的key属性是稳定且唯一的（你当前使用el.id是正确的），这样React会更新现有组件的属性而非重新创建组件，保证懒加载逻辑正常工作。
• 若你的Redux状态更新后，category数组中的元素ID发生变化，会导致组件重新挂载，这可能影响懒加载行为，需确保ID的稳定性。

内容的提问来源于stack exchange，提问作者Old-Prune6489