Chrome禁用缓存时React图片组件触发不必要重渲染的原因咨询

• 组件重渲染时无差别重写img的src属性
  对应使用的pan-zoom类图片组件，在实现时把所有交互（点击图片、操作缩放/旋转控件）都绑定了内部状态更新逻辑，只要触发交互就会拉起组件全量重渲染。而且组件在渲染<img>标签时，没有做属性级的变更比对，重渲染流程里会直接把外部传入的图片URL重新赋值到DOM的src属性上。
  这里刚好踩中了Chrome的特殊行为：当DevTools开了「禁用缓存」开关时，只要img的src属性走了DOM属性更新流程被重新赋值——哪怕前后传入的字符串完全一样、没有任何变化——Chrome都会触发一次全新的图片资源请求，不会直接复用当前页面已经加载过的资源实例。
• 状态更新的触发粒度过粗
  该pan-zoom组件的事件逻辑没有做空操作过滤：哪怕是没有改变缩放、旋转参数的纯点击动作，也会触发一次内部状态变更、触发重渲染。对比换用的lightbox类图片组件，它的状态更新逻辑只有在真正改变图片展示参数、或者传入的资源URL发生真实变化时才会触发，没有实际参数变更的空点击交互根本不会触发状态更新流程。
• 跨浏览器的DOM更新行为差异
  这个问题只有Chrome能复现的核心原因是：其他主流浏览器处理img标签的src属性更新时，如果检测到新传入的属性值和当前DOM上已有的值完全一致，会直接跳过DOM写入操作，也不会触发资源请求；但Chrome在禁用缓存模式下，只要执行了setAttribute('src', 相同值字符串)的DOM操作，无论值是否真的变更，都会重新发起资源请求。

补充：这个场景的重复请求和React的React.memo外层优化没有直接关系——哪怕你给组件包了一层React.memo，只要组件内部渲染时存在重写img src属性的逻辑，在Chrome禁用缓存的环境下依然会触发重复请求。

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