解决 React useEffect 清理函数在生产环境失效的问题

本文针对 React useEffect 清理函数在开发环境正常、生产环境失效的问题，特别是当使用 useRef 避免首次渲染执行时遇到的挑战。文章将深入探讨此问题，并提供一个基于 useState 的健壮解决方案，确保 useEffect 清理逻辑仅在组件卸载时可靠执行，避免不必要的副作用，提升应用在生产环境的稳定性。

理解 useEffect 及其清理函数

useEffect 是 React Hooks 中用于处理副作用（side effects）的核心工具，例如数据获取、订阅事件或手动更改 DOM。它的清理函数（通过从 useEffect 回调中返回一个函数）在组件卸载时执行，或者在依赖项改变导致副作用重新执行之前执行。清理函数的目的是清除前一次副作用留下的任何资源，防止内存泄漏或不一致的状态。

通常，清理函数的执行时机是：

1. 组件卸载时。
2. 在依赖项发生变化，useEffect 重新执行新的副作用之前。

挑战：仅在组件卸载时执行清理逻辑

在某些场景下，我们希望 useEffect 的清理逻辑只在组件完全卸载时执行，而不是在组件首次渲染后或因依赖项变化而重新渲染时执行。例如，当组件挂载时初始化一些全局状态，而在组件卸载时才需要重置这些状态。

开发者常会尝试使用 useRef 来标记组件是否是首次渲染，以跳过首次渲染后的清理逻辑，如下所示：

import React, { useEffect, useRef } from 'react';
import { useDispatch } from 'react-redux';
// 假设有这些action creator
// import { resetTeethData, resetChartingData, resetConsultationData, setDocumentPatient } from './actions';
function MyComponent() {
const firstUpdate = useRef(true);
const dispatch = useDispatch();
useEffect(() => {
// 阻止回调在首次挂载时执行
if (firstUpdate.current) {
firstUpdate.current = false;
return;
}
// 返回清理函数
return () => {
// 清理数据
console.log('执行清理逻辑');
// dispatch(resetTeethData());
// dispatch(resetChartingData());
// dispatch(resetConsultationData());
// dispatch(setDocumentPatient(null));
};
}, []); // 空依赖数组，意味着清理函数只在组件卸载时执行（理论上）
return <div>组件内容</div>;
}

上述代码在开发环境下可能按预期工作，即清理函数只在组件卸载时执行，而不会在首次渲染后立即执行。然而，当应用打包成生产版本（尤其是在 Electron 或 Vite 等构建工具中），这种基于 useRef 的判断可能会失效，导致清理函数在组件卸载时无法执行。这通常是由于生产环境的优化、StrictMode 的行为差异或构建工具对 useRef 值的处理方式不同所致。

健壮的解决方案：利用 useState 跟踪挂载状态

为了确保 useEffect 的清理函数仅在组件卸载时可靠执行，我们可以利用 useState 来精确跟踪组件的挂载状态。这种方法在开发和生产环境中都表现稳定。

核心思想是：

1. 使用一个 useState 变量来表示组件是否已“完全挂载”（即已经完成了首次渲染）。
2. 在 useEffect 内部，将此状态设置为 true。
3. 在 useEffect 的清理函数中，检查这个状态变量，确保清理逻辑只在状态为 true 时执行。
4. 将该状态变量加入 useEffect 的依赖数组，以确保清理函数在状态更新后能够被正确地重新定义。

以下是具体的实现示例：

import React, { useEffect, useState } from 'react';
import { useDispatch } from 'react-redux';
// 假设有这些action creator
// import { resetTeethData, resetChartingData, resetConsultationData, setDocumentPatient } from './actions';
function MyComponent() {
// 使用 useState 跟踪组件是否已挂载
const [mounted, setMounted] = useState(false);
const dispatch = useDispatch();
useEffect(() => {
// 在组件首次渲染并执行 effect 后，将 mounted 状态设置为 true
// 这会触发一次重新渲染
setMounted(true);
// 返回清理函数
return () => {
// 只有当 mounted 为 true 时（即组件已经完成首次渲染且处于挂载状态），才执行清理逻辑
if (mounted) {
console.log('组件已卸载，执行清理逻辑');
// dispatch(resetTeethData());
// dispatch(resetChartingData());
// dispatch(resetConsultationData());
// dispatch(setDocumentPatient(null));
}
};
}, [mounted]); // 将 mounted 加入依赖数组，确保 effect 在 mounted 状态改变时重新运行
return <div>组件内容</div>;
}

解决方案详解

我们来详细分析上述 useState 方案的工作原理：

1. 首次渲染 (mounted 为 false):

   • 组件首次渲染时，mounted 的初始值为 false。
   • useEffect 执行。
   • setMounted(true) 被调用，这会触发组件的重新渲染。
   • 此时，useEffect 返回的清理函数被定义。关键点在于，这个清理函数会捕获当前作用域中 mounted 的值，即 false。

2. 重新渲染 (mounted 变为 true):

   • 由于 setMounted(true) 触发了重新渲染，组件再次渲染，此时 mounted 的值为 true。
   • 因为 mounted 在 useEffect 的依赖数组中，useEffect 会再次执行。
   • 在新的 useEffect 执行之前，React 会执行上一次 useEffect 返回的清理函数。此时，上一次清理函数捕获的 mounted 值为 false，所以 if (mounted) 条件 (if (false)) 不满足，清理逻辑不会执行。这正是我们想要的——避免在首次渲染后立即执行清理。
   • 新的 useEffect 再次执行 setMounted(true)（虽然状态没有实际改变，但 effect 仍会运行）。
   • 一个新的清理函数被定义。这一次，它捕获的 mounted 值为 true。

3. 组件卸载 (mounted 仍为 true):

   • 当组件从 DOM 中移除时（卸载），React 会执行最后一次 useEffect 返回的清理函数。
   • 这个清理函数捕获的 mounted 值为 true。
   • if (mounted) 条件 (if (true)) 满足，清理逻辑被成功执行。

通过这种方式，我们确保了清理逻辑只在组件真正“挂载完成”之后，并且在它即将卸载时才执行。

注意事项与最佳实践

• 依赖数组的重要性： 将 mounted 变量放入 useEffect 的依赖数组 [mounted] 是至关重要的。这确保了当 mounted 状态从 false 变为 true 时，useEffect 能够重新运行，并重新定义一个捕获了最新 mounted 值的清理函数。
• 状态管理与 useRef 的选择：
  • 当一个值需要在组件的整个生命周期中保持不变，并且其变化不应触发组件重新渲染时，useRef 是一个好选择（例如，DOM 元素的引用、定时器 ID）。
  • 当一个值代表组件的某种状态，其变化需要触发组件重新渲染以更新 UI 或影响 useEffect 行为时，useState 是正确的选择。在本例中，组件的“挂载状态”就是一种需要影响 useEffect 行为的状态。
• 测试环境： 在开发环境中，由于 React 的 Strict Mode 和其他调试辅助功能，某些问题可能不会立即显现。因此，始终在接近生产环境的构建和运行条件下进行测试是至关重要的。本例中的问题在 Electron + Vite 的生产构建中暴露，印证了这一点。

总结

useEffect 的清理函数是管理组件副作用生命周期的关键。当需要确保清理逻辑仅在组件卸载时执行，而跳过首次渲染后的执行时，使用 useState 来精确跟踪组件的挂载状态是一种比 useRef 更健壮和可靠的方法。通过巧妙地利用 useState 的更新机制和 useEffect 的依赖数组，我们可以构建出在开发和生产环境中都能稳定运行的组件。