为什么图像请求在React js中一次又一次触发？

Question

我使用final-form制作了一个演示应用程序，但是当我切换按钮（切换按钮）image request fired again and again时遇到了问题。

重现此步骤

1）打开/关闭“切换”按钮。请参见网络请求（应检查禁用缓存）。

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