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

【问题标题】：React Rerender in case of cache disable in Chrome在 Chrome 中禁用缓存的情况下 React Rerender
【发布时间】：2021-06-10 10:15:19
【问题描述】：

我有一个 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 并且它在禁用缓存时没有任何此类问题。

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

【问题讨论】：

标签： javascript node.js reactjs google-chrome lightbox

【解决方案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 prop 导致新实例的原因，请参阅react docs 和Understanding unique keys for array children in React.js 上的此答案

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

React 使用 key prop 来理解 component-to-DOM Element 关系，然后用于reconciliation process。它是因此，密钥始终保持唯一非常重要，

...

这些键保持静态也很重要贯穿所有重新渲染以保持最佳性能。

解决方案

我创建了一个沙箱，我只删除了该行，它有效地停止了重新加载图像。

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

【讨论】：