本文讲解在 react 函数组件中使用 useeffect 初始化并清理第三方或自定义类实例的正确方式，重点解决因状态更新延迟导致的清理失效、重复初始化等问题。
本文讲解在 react 函数组件中使用 useeffect 初始化并清理第三方或自定义类实例的正确方式，重点解决因状态更新延迟导致的清理失效、重复初始化等问题。
在 React 函数组件中，我们常需封装非 React 原生的类（如定时器、WebSocket、Canvas 渲染器等），并在组件挂载时初始化、卸载时销毁。但若错误地依赖 useState 存储实例并试图在 useEffect 清理函数中读取该 state，就会引发经典陷阱：清理函数中读取到的 state 值仍是初始值（如 null），导致销毁逻辑完全不执行。
问题根源在于：useEffect 的清理函数捕获的是当前 effect 执行时闭包中的变量值，而非最新 state。当你写：
const [testComponent, setTestComponent] = useState<TestComponent | null>(null);
useEffect(() => {
const localTestComponent = new TestComponent();
setTestComponent(localTestComponent); // 触发异步重渲染，但当前 effect 闭包中 testComponent 仍为 null
return () => {
if (testComponent) { // ❌ 此处 testComponent 永远是初始 null
testComponent.destroy();
}
};
}, []);setTestComponent 不会立即改变 testComponent 变量；它仅调度一次重渲染，而清理函数运行时，testComponent 仍处于上一轮渲染的值（即 null），因此 destroy() 从不被调用，定时器持续泄漏。
✅ 正确做法是：避免将实例存入 state，直接在 effect 内创建并返回其销毁函数——利用闭包天然持有对 localTestComponent 的引用：
function TestApp() {
useEffect(() => {
const component = new TestComponent(); // ✅ 实例在闭包内创建
// ✅ 直接返回销毁函数（或内联清理逻辑）
return () => {
component.destroy(); // ✅ 能正确访问并清理
};
}, []); // 空依赖数组确保仅在挂载/卸载时执行
return <div>Test app</div>;
}这样不仅消除了 state 更新带来的时序问题，还更轻量（无需额外 state 声明）、更可靠（销毁必定执行）。若需在组件内部访问该实例（例如响应用户操作），可结合 useRef 安全持有：
function TestApp() {
const componentRef = useRef<TestComponent | null>(null);
useEffect(() => {
const component = new TestComponent();
componentRef.current = component;
return () => {
component.destroy();
componentRef.current = null;
};
}, []);
const handleStop = () => {
if (componentRef.current) {
componentRef.current.destroy();
componentRef.current = null;
}
};
return (
<div>
<button onClick={handleStop}>Stop Interval</button>
<div>Test app</div>
</div>
);
}⚠️ 注意事项：
- 不要在 cleanup 中读取 state 值来判断是否清理：state 是异步更新的，闭包中不可靠；
- 优先使用闭包变量而非 state 存储副作用实例：简单场景直接返回销毁函数；
- 复杂交互需暴露实例时，用 useRef 而非 useState：ref.current 可变且同步更新，适合存储命令式实例；
- 确保 destroy() 方法幂等：即使被多次调用也不应报错（例如 clearInterval 对已清除的 timer 是安全的）。
遵循这一模式，即可稳健管理任意外部类实例的生命周期，彻底规避重复初始化与资源泄漏风险。
