Javascript 在Chrome中缓存禁用的情况下响应重新加载

我有一个react应用程序，我使用“react image pan zoom rotate”显示图像

我基本上有一个外部服务的url，它提供了我要传递给下面两个库来呈现图像的图像

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

现在我已经开始使用了，它没有任何缓存禁用的问题

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

重现这个问题 我可以重现你描述的行为： 禁用缓存确实会导致每次重新下载映像

问题 这是由于它们的实现（可以在这里看到）设置了

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使用键prop来理解component to DOM元素 关系，然后用于。它是 因此，关键始终保持唯一性非常重要

这些键保持静止也很重要 在整个重新渲染过程中，以保持最佳性能

解决方案 我创建了一个沙盒，我只删除了这一行，它有效地停止了重新加载图像