Cleanup Function 副作用清理
最后更新：2026-10-28
Cleanup Function 副作用清理
清理函数是 effect 返回的收尾函数：在下次 effect 执行前、组件卸载时各执行一次，用于取消定时器、退订事件、中断请求。没有清理，副作用会在组件消失后继续运行，造成泄漏。
| 分组 | 副作用与性能 |
|---|---|
| 类型 | 模式 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
useEffect(() => {
const id = setInterval(tick, 1000)
window.addEventListener('resize', onResize)
return () => { // 收尾：先清旧的再跑新的
clearInterval(id)
window.removeEventListener('resize', onResize)
}
}, [])返回值：无返回值，作为编码模式使用。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
计时器每秒 +1；点「暂停」立即停止（清理函数执行），点「继续」重新启动，任意时刻只有一个定时器存活。💡 要点
⚠️ 注意 依赖变化时 React 会先执行上一次的清理再跑新 effect——不理解这点就解释不了「定时器越跑越快」的 bug。
💡 提示 setInterval、addEventListener、事件订阅、未完成的 fetch 都应配清理函数。
ℹ️ 说明 「先清理旧的，再建立新的」保证同一副作用在任意时刻只有一份存活。
🏷️ 副作用与性能相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q effect 必须返回清理函数吗？
A 不必。没有需要收尾的资源（如纯日志）可以不返回；有定时器/订阅/请求时则必须返回。
Q 依赖变化时清理会执行吗？
A 会。每次 effect 重跑前都会先执行上一次的清理；组件卸载时执行最后一次清理。
Q 清理函数里读到的是新 state 还是旧 state？
A 旧 state——清理函数捕获的是创建它的那次渲染的闭包，这正是「取消旧副作用」所需要的。
