每次更改页面时都会调用 React useEffect (with []) (React Router)

Posted 2023-02-21

【中文标题】每次更改页面时都会调用 React useEffect (with []) (React Router)

【英文标题】：React useEffect (with []) is called every time I change page (React Router)

【发布时间】：2020-02-21 15:59:33

【问题描述】：

我为这个问题准备了小demo：

Demo

所以我使用 react-router-dom 创建单页应用程序，并在两个页面（组件 Page1 和 Page2）之间创建了标准导航。

问题是每次我在页面之间切换时都会调用 useEffect 钩子（以空数组作为第二个参数）（在演示中，您可以在控制台中看到它）。

无论用户是否会在页面之间切换，我只想为每个组件获取一次数据并在之后重用该数据。是否有可能在不检查 useEffect 函数中的某些条件的情况下做到这一点？这让我有点困惑，因为 useEffect [] 应该只为组件运行一次，而事实并非如此。

【问题讨论】：

@Rajesh 不，那是错误的。一个空数组意味着它只会在组件挂载时运行，仅此而已。如果组件被卸载，它将被再次调用，然后再次安装。

【参考方案1】：

空的 deps 数组意味着 useEffect 只会在每次安装组件时被调用。每次更改页面时都会调用useEffect，因为每次都会卸载页面组件，然后在您再次访问它时重新安装。例如，尝试单击第 1 页链接两次。它只会记录一次消息，因为页面没有被卸载和重新安装。

您可以尝试通过使用比页面更高的级别useEffect 来解决此问题，这将是您的应用程序组件，并在那里调用您的 fetch。但是，我不确定是否可以使用类组件来完成，因此您可能必须改用函数组件。

【讨论】：

查看此行为的另一种有趣方法是将 Page2 从传递给路由上的组件属性中交换出来，这样它们都像 component=Page1 一样呈现 Page1，这是固有的在该设置中路径更改时它们卸载的 Route 组件