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

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

<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中使用图像，这将有助于解决此问题。

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

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

const Image=React.memo（函数映像（{src}）{
返回；
});

然后使用它：

<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（函数映像（{src}）{
返回；
});
函数App（）{
const[counter，setCounter]=React.useState（0）；
常数src=
'https://en.bcdn.biz/Images/2018/6/12/f0d2c2ca-dc61-4613-9685-6c98cbb8a990.jpg';
React.useffect（（）=>{
常数t=setInterval（（）=>{
设置计数器（（c）=>c+1）；
}, 100);
});
返回(
{计数器}
);
}
ReactDOM.render（，document.getElementById（'root'））

是否尝试使用React.memo防止功能组件重新渲染？制作一个单独的组件以显示微调器，并使用
React.memo
防止其重新渲染Hi@HMR，memo有助于在状态更新时防止重新渲染。但如何防止在父对象更新时重新渲染，从而触发包含此图像的子对象重新渲染。在此场景中，图像将重新渲染。父级只向子级传递两个道具，一个函数和一个布尔值，在父级更新时不会更改。那么，子级不应该重新渲染吗？@RohanAgarwal No memo阻止在传递给它的道具没有更改但父级由于某种原因（道具更改、本地状态更改、与useSelector或useContext不同的结果）正在重新渲染时重新渲染。在我的回答中；如果
src
未更改，则不会重新渲染图像。