组件挂载时useEffect的返回函数是否运行？答案

【问题标题】：Does the return function of useEffect run when the component is mounted?组件挂载时useEffect的返回函数是否运行？
【发布时间】：2022-08-03 03:32:12
【问题描述】：

这是我的代码

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。

这是正常的吗？而且，是否存在仅在卸载组件时运行副作用功能的方法？

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

可能是 React 严格模式，它两次挂载组件以实现更好的错误检查。 reactjs.org/docs/strict-mode.html
是的，您可以在此处github.com/facebook/react/issues/24502#issuecomment-1121089680 的此问题中看到有关此行为的一些论据

标签： reactjs use-effect

【解决方案1】：

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

如果你看到docs

严格模式不能自动为您检测副作用，但它可以通过使它们更具确定性来帮助您发现它们。这是通过有意双重调用以下函数来完成的 ...

【讨论】：

【解决方案2】：

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

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

结论：别担心，这是预期的行为。我将把 link 留给 React 的文档来解释。

【讨论】：