我有一个 React 应用程序，我在其中使用“react-image-pan-zoom-rotate”来显示图像。
https://github.com/mgorabbani/react-image-pan-zoom-rotate
我基本上有一个外部服务的 url，它提供我传递给以下两个库以呈现图像的图像。
最近我开始面临一个问题（仅在 Chrome 中），如果缓存被禁用，那么每当我在浏览器中单击图像或使用此组件提供的任何控件时，它都会重新渲染它，从而导致对外部的另一个调用图像服务器。每当我单击/与上述反应库生成的图像或视图进行交互时，就会发生这种情况。
现在我已经开始使用 https://github.com/theanam/react-awesome-lightbox/blob/master/src/index.js 并且它在禁用缓存的情况下没有任何此类问题。
知道为什么会发生这种情况吗？
我可以重现您描述的行为：https://codesandbox.io/s/n1rv671pkj 禁用缓存确实会导致图像每次都重新下载。
这是由于它们的实现（可以在这里看到 https://github.com/mgorabbani/react-image-pan-zoom-rotate/blob/master/src/PanViewer.tsx），它们设置了 <option name="SPACE_WITHIN_IF_PARENTHESES" value="true" />
key={dx}这告诉 react 在每次图像的 x 坐标更改时实例化一个新组件，并且没有缓存，这意味着重新下载图像（尝试仅垂直移动，您将看不到重新加载）。要了解 key prop 导致新实例的原因，请参阅 react docs 和 Understanding unique keys for array children in React.js
上的此答案以下是上面链接的答案的解释要点：
React 使用 key prop 来理解 component-to-DOM 元素 关系，然后用于 reconciliation process。这是 因此，密钥始终保持唯一非常重要，
...
这些键保持静态也很重要 在所有重新渲染过程中，以保持最佳性能。
我创建了一个沙箱，我只删除了该行，它有效地停止了重新加载图像。
https://codesandbox.io/s/react-image-pan-zoom-rotate-forked-tn787?file=/src/index.tsx