CARA 卸载组件并在每次保存时重新安装

Question

考虑下面的代码片段：

import { useEffect } from "react";

export const Hello = () => {
  useEffect(() => {
    console.log("Mounted");
    return () => {
      console.log("Unmounted");
    };
  }, []);

  return <h1>Hello</h1>;
};

我观察到每次我进行一些更改并保存时，我都会打印 Unmounted 和 Mounted 日志，这意味着组件正在卸载然后重新安装。

这不是关键，但在我的项目中，我正在使用 Iframes 并在卸载时运行一些我不想运行不必要的代码。

从一开始就是这样，有什么变化吗？

Answer 1

使用热模块重新加载时，更改功能组件内部的某些内容并保存不会导致组件被卸载并再次安装但所有效果重运行.

来源：Comment from Dan Abramov, author of React Hot Loader

一般来说，功能组件就是这种情况。正如 useEffect 上的 React 文档中所述：

When exactly does React clean up an effect? React performs the cleanup when the component unmounts. However, as we learned earlier, effects run for every render and not just once. This is why React also cleans up effects from the previous render before running the effects next time.

Answer 2

情况并非总是如此，CRA 早期使用“React Hot Loader”，但随着版本 4 升级到 “React Fast Refresh”.

快速刷新引入了可重用状态的概念。每次保存文件时快速刷新，您的效果会 re-run 但组件的状态会被保留。

注意：您应该确保您的组件能够多次“挂载”和“卸载”，React 18 的严格模式甚至通过“卸载”来确保这种弹性& "re-mounting" 新挂载组件，阅读更多.

CARA 卸载组件并在每次保存时重新安装

CRA unmounts a component and mounts it back on every save

reactjs

create-react-app