React函数组件卸载问题：为何清理函数每次点击按钮都执行？

为什么每次点击按钮都会触发清理函数？ #

你写的useEffect没有添加依赖数组，这是React中useEffect的默认行为：

• 不带依赖数组的useEffect会在组件每次渲染完成后执行
• 并且在**下一次effect执行前（包括组件卸载时）**自动调用上一次effect返回的清理函数

当你点击按钮切换seeBox状态时，父组件MouseContainer会重新渲染：

• 若seeBox从true变为false：BlackBox被卸载，触发清理函数
• 若seeBox从false变为true：如果之前BlackBox已经卸载，重新挂载时不会触发旧的清理，但如果你的代码存在其他触发组件重新渲染的情况（比如父组件不必要的重渲染传导），不带依赖的useEffect也会在组件重新渲染时先执行清理再运行新的effect，导致你看到每次点击都有输出。

修复方法 #

给useEffect加上空的依赖数组[]，这样effect只会在组件挂载时执行一次，对应的清理函数只会在组件卸载时触发一次，完全符合你的预期。

修改后的BlackBox组件代码：

function BlackBox() {
  const onBackBoxUnmount = () => {
    console.log("clean up code ...");
  };
  useEffect(() => {
    return onBackBoxUnmount;
  }, []); // 添加空依赖数组
  return (
    <div style={{ backgroundColor: "black", height: 100, width: 100 }}></div>
  );
}

补充说明 #

• 依赖数组的作用是告诉React：只有当数组内的依赖项发生变化时，才重新执行effect
• 空数组[]表示没有依赖项，因此effect仅在组件挂载时执行一次，清理函数仅在组件卸载时执行

内容的提问来源于stack exchange，提问作者H-Bar