防止图像在每次状态更改时重新渲染 - React

Question

在我的组件中，我以以下方式使用了图像：

<div className="margin-10 flex-row-center">
                    <span>
                        <img src={spinner} className="spinner" />
                    </span>
                    <span className="padding-10">
                        We are checking your details
                    </span>
</div>

这是来自一个包含许多状态的大型功能组件的几行代码。该组件有时也用作其他组件的子组件。

现在，每当状态更新时，都会重新渲染组件。自然。

然而，图像上的视觉更新是可见的，这不是一个好的用户体验。

关于如何防止这种不必要的图像重新渲染的任何帮助。另外，如果有任何其他方法可以在 React 中使用图像，可以解决这个问题，将会很有帮助。

Answer 1

您可以尝试使图像成为自己的纯组件：

const Image = React.memo(function Image({ src }) {
  return <img src={src} className="spinner" />;
});

然后使用它：

<div className="margin-10 flex-row-center">
  <span>
    <Image src={spinner} />
  </span>
  <span className="padding-10">
    We are checking your details
  </span>
</div>

这是一个工作片段：

const Image = React.memo(function Image({ src }) {
  return <img src={src} className="spinner" />;
});

<div className="margin-10 flex-row-center">
  <span>
    <Image src={spinner} />
  </span>
  <span className="padding-10">
    We are checking your details
  </span>
</div>