为什么图像请求一次又一次的在反应js？

Question

我使用final-form制作了一个演示应用程序，但当我切换按钮(切换按钮) image request fired again and again时，我面临一个问题。

复制这个步骤

1)打开/关闭button.see网络请求(应检查禁用缓存)。

https://codesandbox.io/s/snowy-browser-sfpnz

const Abc = React.memo(() => {
  return (
    <ImageContainer>
      <Image id="titleLogo" src={src} />
      <TitleText>{title}</TitleText>
    </ImageContainer>
  );
});
const ShowImage = useCallback(() => {
  return <Abc />;
}, []);

​

​

Answer 1

将样式化的组件调用从“AppWithIconToggle”函数体中取出。将标题和src作为支持给Abc组件并给它备注，这样当它们不变时它就不会重发。

const Abc = React.memo(({ title, src }) => {
  console.log("render", title, src);
  return (
    <ImageContainer>
      <Image id="titleLogo" src={src} />
      <TitleText>{title}</TitleText>
    </ImageContainer>
  );
});

https://codesandbox.io/s/hopeful-snowflake-h13uc