防止图像在每次状态更改时重新渲染- 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

你可以试着让image成为它自己的纯组件：

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" />;
});

function App() {
  const [counter, setCounter] = React.useState(0);
  const src =
    'https://en.bcdn.biz/Images/2018/6/12/f0d2c2ca-dc61-4613-9685-6c98cbb8a990.jpg';
  React.useEffect(() => {
    const t = setInterval(() => {
      setCounter((c) => c + 1);
    }, 100);
  });
  return (
    <div>
      <div>{counter}</div>
      <div>
        <Image src={src} />
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>


<div id="root"></div>

​