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

【问题标题】：why image request fire again and again in react js?为什么图像请求在 React js 中一次又一次地触发？
【发布时间】：2019-08-16 10:36:21
【问题描述】：

我使用 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 />;
}, []);

【问题讨论】：

标签： javascript reactjs react-hooks react-final-form

【解决方案1】：

从“AppWithIconToggle”函数体中取出样式化组件调用。将 title 和 src 作为 props 给 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

【讨论】：