每当我更改页面时，都会调用React useEffect（带有[]）（React Router）

Question

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

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

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

我只想为每个组件提取一次数据，然后再使用该数据，无论用户是否在页面之间进行切换。是否有可能在不检查useEffect函数内部某些条件的情况下执行此操作？这让我有些困惑，因为useEffect []应该只为组件运行一次，而不是这种情况。

Answer 1

空的deps数组意味着useEffect仅在每次安装组件时才调用。该useEffect是被称为每次更改页面，因为页面组件每一次，然后当你再次访问它重新安装被卸载的时间。例如，尝试两次单击页面1链接。因为不会卸载和重新安装页面，所以它只会记录一次消息。

您可以尝试使用useEffect比页面更高的级别来解决此问题，该页面将成为您的应用程序组件，然后在此处调用获取。但是，我不确定可以使用类组件来完成此操作，因此您可能不得不使用功能组件。