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>

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

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

但是，可以看到图像的视觉更新，这不是一个好的UX。

有关如何防止此类不必要的图像重新渲染的任何帮助。另外，如果在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" />;
});

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>

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

1 个答案: