组件挂载时，是否会运行useEffect的return函数?

Question

这是我的代码

import { useEffect } from "react";
import { Link } from "react-router-dom";
export const PageOne = () => {
useEffect(() => {
return () => {console.log("PageOne")}
}, []);
return (
<>
<h1>PageOne</h1>
<Link to="/two">Page two</Link>
</>
);
}

这是我访问PageOne

时在控制台中看到的内容

PageOne

这是当我从PageOne导航到PageTwo (PageOne和PageTwo具有相同的结构)时在控制台中打印的内容

PageOne
PageTwo 

所以我认为在useEffect中定义的返回函数在组件被挂载和卸载时运行。我在这个项目中使用react-router-dom和Vite。

这正常吗?并且，是否存在一种方法，仅当组件将被卸载时才运行副作用函数?

对不起，如果我犯了一些错误。我是一名新开发人员，也是一名英语学生。

Answer 1

它发生是React.StrictMode的一个有意的特性。它只发生在开发模式下，应该有助于在渲染阶段发现意外的副作用。

如果你看到docs

严格模式不能自动检测的副作用,但它可以通过让它们更确定一点来帮助你发现它们。这是通过有意地双重调用以下函数来实现的…

Answer 2

我认为你的问题被误解了，但是其他用户提供的关于StrictMode的解释是正确的。

现在，回答我认为是你的实际问题:useEffect的清理功能不仅在你的组件即将卸载时执行，它还会在实际运行下一个预定效果之前运行清理以前的渲染效果。

结论:别担心，这是一种预期行为。我将把这个链接留给React的文档，在那里解释。