在 Chrome 中禁用缓存时 React Rerender

Question

我有一个 React 应用程序，我在其中使用 'react-image-pan-zoom-rotate' 来显示图像。

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

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

最近我开始面临一个问题（仅在 Chrome 中），如果缓存被禁用，那么每当我在浏览器中单击图像或使用此组件提供的任何控件时，它都会重新呈现它，结果在对外部图像服务器的另一个调用中。每当我 click/interact 使用上述反应库生成的图像或视图时，就会发生这种情况。

现在我已经开始使用 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 坐标发生变化时实例化一个新组件，并且没有缓存意味着重新下载图像（尝试仅垂直移动，您将看不到重新加载）。要了解为什么 key 道具会导致新实例，请参阅 react docs and this answer on

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

React uses the key prop to understand the component-to-DOM Element relation, which is then used for the reconciliation process. It is therefore very important that the key always remains unique,

...

It is also important that these keys remain static throughout all re-renders in order to maintain best performance.

解决方案

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

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

在 Chrome 中禁用缓存时 React Rerender

React Rerender in case of cache disable in Chrome

javascript

google-chrome

lightbox

node.js

reactjs

重现问题

问题

说明

解决方案