如果Chrome禁用缓存，React会重新渲染吗？

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，它在禁用缓存时没有任何此类问题。有什么想法为什么会发生这种情况吗？

- INDER

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文档以及理解React.js中数组子元素的唯一键上的答案。

以下是上面链接的答案的概述：

React使用key属性来理解组件与DOM元素之间的关系，然后用于协调过程。因此，关键字始终保持唯一非常重要。

...

保持这些键在所有重新渲染中保持静态是非常重要的，以保持最佳性能。

解决方案

我创建了一个沙盒，只删除了那行代码，它有效地停止重新加载图片。

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

- Tiago Coelho