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

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