本文介绍一种无需清空 src 或拼接时间戳即可可靠重播 gif 的 react 实现方案，兼顾浏览器缓存与动画触发机制，并提供更优的 svg 替代建议。
在 React 中强制重播 GIF 动画是一个常见但易被误解的问题。直接修改 <img src> 为相同 URL 不会触发重加载（浏览器复用缓存），而清空再设回（如 setSrc(''); setSrc(url)）虽能生效，却依赖 React 更新时机和微任务队列，属于不稳定的“竞态 workaround”。
更健壮的解决方案：利用 key 属性强制组件重挂载
React 会将 key 变化视为新元素，从而卸载旧 <img> 并创建新实例——这天然触发 GIF 从头播放，且不破坏 HTTP 缓存（浏览器仍复用已缓存的 GIF 资源，仅重新解码播放）：
const [gifKey, setGifKey] = useState(0);
const triggerGifReplay = () => {
setGifKey(prev => prev + 1); // 每次调用生成唯一 key
};
// 在需要重播时调用
useEffect(() => {
const interval = setInterval(() => {
triggerGifReplay();
setActiveIndex(prev =>
prev === (topBonusList?.length ?? 0) - 1 ? 0 : prev + 1
);
}, 12000);
return () => clearInterval(interval);
}, [topBonusList]);
// 渲染时绑定 key
<img
key={gifKey}
src={CHECKMARK_ANIMATION_ICON}
alt="Checkmark animation"
aria-hidden="true"
/>✅ 优势说明：
- ✅ 零网络请求：src 不变，浏览器 100% 复用缓存的 GIF 文件；
- ✅ 语义清晰：key 是 React 官方推荐的强制重渲染机制，无副作用；
- ✅ 精准可控：每次 triggerGifReplay() 都确保动画从第 1 帧开始；
- ✅ 兼容性好：无需修改图片 URL，规避 CDN 缓存失效风险。
⚠️ 注意事项：
- 避免高频触发（如每秒多次），否则可能造成不必要的 DOM 销毁/重建；
- 若 GIF 需配合状态过渡（如“成功 → 隐藏”），建议结合 CSS opacity 或 visibility 控制显隐，而非依赖 key 切换；
- 对于复杂交互动画，强烈建议迁移到 SVG + CSS/JS 动画（如 @keyframes 或 motion.div），它体积小、可矢量缩放、完全可控且无缓存歧义。
? 终极建议：用 SVG 替代 GIF
例如将检查动画转为 SVG：
<svg viewBox="0 0 24 24" width="48" height="48">
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
fill="currentColor"
className="checkmark-path" />
</svg>再通过 CSS 控制描边动画或 transform: scale() 实现脉冲效果——既节省带宽，又彻底规避 GIF 重播难题。
