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

Question

我为这个问题准备了一个小演示:

Demo

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

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

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

Answer 1

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

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