useeffect 未清理 cleartimeout 会导致内存泄漏，因定时器回调持续引用组件状态，卸载后 setstate 触发警告；必须返回 cleartimeout 调用，多定时器推荐 useref 管理 id 并显式置空。
为什么 useEffect 里没清理 clearTimeout 就会内存泄漏
React 组件卸载后，如果定时器还在运行，回调函数仍持有对组件内部状态、props 或闭包变量的引用，JS 引擎无法回收这些对象。尤其当 setInterval 或 setTimeout 的回调里调用了 setState，就会触发“Can’t perform a React state update on an unmounted component”警告，本质是状态更新试图修改已销毁的 fiber 节点。
常见错误写法是只在初始渲染时设定时器，但没在组件卸载前清除：
useEffect(() => {
const timer = setTimeout(() => setCount(c => c + 1), 1000);
}, []); // 没 return 清理函数 → timer 永远活着
useEffect 清理函数必须 return 一个执行 clearTimeout 的函数
React 会在组件卸载或 effect 重新执行前，自动调用你 return 的函数。这个函数体里要确保调用 clearTimeout（或 clearInterval），且传入的是同一个 timer ID。
关键点：
-
timer必须定义在 effect 内部（避免闭包捕获旧值） - 清理函数必须显式调用
clearTimeout(timer) - 不要提前把
timer设为null或重赋值，否则清理时可能清错/清空
useEffect(() => {
const timer = setTimeout(() => setCount(c => c + 1), 1000);
return () => clearTimeout(timer); // ✅ 正确：返回一个清除动作
}, []);
多个定时器或动态创建时，怎么安全管理 timer ID
单个定时器用局部变量足够；但遇到以下情况，需额外注意：
- 同一 effect 中启动多个
setTimeout/setInterval - 根据 props 变化反复启停定时器（比如轮询开关）
- 使用自定义 Hook 封装定时逻辑
推荐做法是统一存进一个可变引用（如 useRef），避免闭包陷阱：
const timerRef = useRef(null);
<p>useEffect(() => {
timerRef.current = setTimeout(() => console.log('done'), 2000);
return () => {
if (timerRef.current) {
clearTimeout(timerRef.current); // ✅ 防 null 报错
timerRef.current = null; // ✅ 显式置空，便于调试
}
};
}, []);</p>
如果需要根据依赖重启定时器（例如 intervalMs 改变），记得先清除旧的再设新的，否则会残留多个 timer。
useLayoutEffect 或 useInsertionEffect 能替代吗
不能。定时器清理和组件生命周期强绑定，必须在 React 知道组件将被卸载时执行，而只有 useEffect 的清理函数能保证在组件 unmount 时被调用。useLayoutEffect 的清理时机与 useEffect 一致，但它的同步执行特性不带来任何清理优势，反而可能阻塞渲染；useInsertionEffect 完全不适用于此场景——它只在 DOM 插入前运行，且没有卸载清理机制。
真正容易被忽略的是：定时器 ID 是 number 类型，但不同浏览器/环境可能返回 0 或负数，所以判断是否有效不能只用 if (timer)，得用 if (timer != null) 或显式 typeof timer === 'number'。
