React JS无限滚动轮播组件“图片闪烁”bug成因及解决方案问询

成因 #

• 首要原因是你使用了数组下标作为Card组件的key属性。当你将尾部元素移到头部时，React Diff 算法会判定所有Card的属性都发生了变更，触发全量重渲染而非复用已有DOM节点。尽管img的src没有变化，但重渲染过程中浏览器会触发图片的重校验与重绘，该操作刚好和CSS动画复位的帧执行时机重合，最终表现为闪烁。
• 无img元素的原生Demo运行正常，恰好验证了上述判断：没有图片重绘步骤时，纯DOM结构的调整不会触发视觉闪烁。

解决方案 #

按优先级从高到低依次调整即可解决问题：

1. 替换Card的key属性为和资源绑定的唯一值，不要使用数组下标。比如直接用图片src作为key，React会直接复用已有DOM节点，不会触发全量重渲染，从根源避免img重绘。
2. 给Track元素开启硬件加速，避免动画操作触发全图层重绘：给Track对应的CSS加上transform: translateZ(0)和will-change: transform属性。
3. 调整状态更新时机，用requestAnimationFrame包裹状态更新逻辑，确保动画复位帧绘制完成后再修改DOM结构，避免帧操作冲突。
4. 提前预加载所有轮播图片，确保资源已经被浏览器缓存，避免重渲染时触发二次资源请求。

调整后的核心代码 #

const Card = props => {
  return (
    <div {...props}>
      <img src={props.src} decoding="sync" />
    </div>
  );
}

// 返回轮播卡片的JSX元素数组
const makeCards = (num, images) => {
  return Array(num)
    .fill(null)
    .map((__, index) => {
      // 用图片src作为唯一key，不要使用数组下标
      return <Card src={images[index]} key={images[index]} />;
    });
};

export default (props) => {
  const trackRef = useRef();
  // 初始化卡片数组
  const [cards, setCards] = useState(() => makeCards(12, props.images));

  // 预加载所有轮播图片
  useEffect(() => {
    props.images.forEach(src => {
      const img = new Image();
      img.src = src;
    })
  }, [props.images])

  useEffect(() => {
    const trackNode = trackRef.current
    trackNode?.addEventListener("animationiteration", onAnimationIteration);
    // 组件卸载时移除监听，避免内存泄漏
    return () => {
      trackNode?.removeEventListener("animationiteration", onAnimationIteration)
    }
  }, []);

  // 将最后一张卡片移到数组头部后触发重渲染
  const onAnimationIteration = () => {
    cards.unshift(cards.pop())
    // 等待当前动画帧绘制完成后再更新状态
    requestAnimationFrame(() => {
      setCards([...cards]);
    })
  };

  return (
    <Container>
      {/* Track元素开启硬件加速 */}
      <Track 
        ref={trackRef} 
        animSpeed={props.animSpeed}
        style={{
          transform: 'translateZ(0)',
          willChange: 'transform'
        }}
      >
        {cards}
      </Track>
    </Container>
  );
};

内容的提问来源于stack exchange，提问作者minnow