防止图像在每次状态更改时重新渲染 - React [英] Prevent image from rerendering at every state change - React

问题描述

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

<跨度><img src={spinner} className=spinner"/></span><span className="padding-10">我们正在检查您的详细信息</span>

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

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

但是，可以看到图像的视觉更新，这不是一个好的用户体验.

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

解决方案

你可以尝试让 image 成为它自己的纯组件:

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

然后使用它:

<跨度><图像源={微调器}/></span><span className="padding-10">我们正在检查您的详细信息</span>

这是一个工作片段:

const Image = React.memo(function Image({ src }) {返回 <img src={src} className="spinner"/>;});功能应用(){const [counter, setCounter] = React.useState(0);常量源 ='https://en.bcdn.biz/Images/2018/6/12/f0d2c2ca-dc61-4613-9685-6c98cbb8a990.jpg'；React.useEffect(() => {const t = setInterval(() => {setCounter((c) => c + 1);}, 100);});返回 (<div><div>{计数器}</div><div><图片src={src}/>

);}ReactDOM.render(, 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>

In my component I have used an image in the following manner:

<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>

This is a few lines from a big functional component that has many states in it. This component is also sometimes used as a child to other components.

Now, whenever a state gets updated, a re-render of the component happens. Natural.

However, a visual update on the image is visible, which is not a good UX.

Any help, on how to prevent such unnecessary re-rendering of images. Also, if there is any other way to use images in React, that could solve this problem, will be helpful.

解决方案

You can try to make image it's own pure component:

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

And then use it:

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

Here is a working snippet:

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！