在Chrome中禁用缓存的情况下，React Rerender

Question

我有一个react应用程序，我使用"react image pan zoom rotate"来显示图像。

https://github.com/mgorabbani/react-image-pan-zoom-rotate

我基本上有一个外部服务的url，它提供图像，我将其传递给下面的两个库来渲染图像。

最近，我开始面临一个问题(仅在Chrome中(，如果缓存被禁用，那么每当我在浏览器中单击图像或使用该组件提供的任何控件时，它都会重新发送图像，从而导致对外部图像服务器的另一次调用。每当我点击/与上面的react库生成的图像或视图交互时，就会发生这种情况。

现在我已经开始使用https://github.com/theanam/react-awesome-lightbox/blob/master/src/index.js并且它在禁用高速缓存的情况下不存在任何这样的问题。

知道为什么会发生这种事吗？

Answer 1

再现问题

我可以重现你描述的行为：https://codesandbox.io/s/n1rv671pkj禁用缓存确实会导致每次都重新下载映像。

问题

这是由于它们的实现(可以在这里看到https://github.com/mgorabbani/react-image-pan-zoom-rotate/blob/master/src/PanViewer.tsx)其中他们设置key={dx}

<StyledReactPanZoom
zoom={zoom}
pandx={dx}
pandy={dy}
onPan={onPan}
rotation={rotation}
key={dx}
>
<img
style={{
transform: `rotate(${rotation * 90}deg)`,
}}
src={image}
alt={alt}
ref={ref}
/>
</StyledReactPanZoom>

解释

这告诉react在每次图像的x坐标变化时实例化一个新组件，而不使用缓存，这意味着重新下载图像(尝试仅垂直移动，不会看到重新加载(。要了解密钥道具导致新实例的原因，请参阅react文档和react.js 中"理解数组子级的唯一密钥"的答案

以下是上面链接的答案的解释要点：

React使用关键道具来理解DOM元素的组件关系，然后用于对账过程。是的因此，密钥始终保持唯一性非常重要，

。。。

这些键保持静态也很重要以保持最佳性能。

解决方案

我创建了一个沙盒，在那里我只删除了那一行，它实际上停止了重新加载图像。

https://codesandbox.io/s/react-image-pan-zoom-rotate-forked-tn787?file=/src/index.tsx