反应：有什么办法可以缓存组件或防止每次渲染的冗余 HTTP 调用

Question

下面的简单代码沙箱显示导航到组件会触发新的渲染。 React 分析器指出组件已被渲染，因为它们是第一次连续出现。 我理解这是正确的 React 行为，因为每个安装/渲染都会生成触发重新渲染的新方法引用。 然而，这意味着尽管没有任何改变，但仍会发出几个 http 请求。 有什么方法可以防止每次用户导航到组件时都发出这些请求？

在codesandbox ，我尝试使用React.memo和useCallback ，并且都没有重用初始渲染。

单击console选项卡以查看每次组件呈现时，它都会进行新的 ajax 调用。

https://codesandbox.io/s/github/pstephenwille/react-render-question

Answer 1

为了避免多余的 HTTP 调用，您必须验证您的源服务器没有更新您的本地数据。 如果你真的只想触发一次 HTTP 调用，你可以在你的App组件中执行它们，或者传递一个 state 和一个回调 function 来确保你的Foo和Bar组件调用单一的屏幕组件