为何需使用useEffect清理函数而非在其内部开头编写清理代码？

核心问题：你的方案无效的根源是闭包+函数引用变化 #

先看你的代码问题：每次组件渲染时，handler都会被重新创建（因为它在组件函数内部，每次渲染都会执行组件函数），所以每次useEffect里的handler都是一个全新的函数引用。

你在useEffect开头写的document.removeEventListener('click', handler)，移除的是当前这次渲染的新handler，但这个handler还没被添加过；而上一次渲染时添加的那个旧handler，因为闭包的原因，当前代码根本拿不到它的引用，所以旧监听根本没被移除。

结果就是：每次渲染都往document上绑定一个新的click监听，点击时多个handler同时执行，clickCount自然会出现跳变（比如点一次加好几次）。

cleanup函数为什么能解决问题？ #

cleanup函数的执行时机和捕获逻辑刚好命中痛点：

1. 执行时机精准：cleanup会在组件卸载前，或者下一次useEffect执行前自动运行。
2. 捕获上一次的状态和函数：cleanup函数是在上一次渲染的useEffect里创建的，它捕获的是上一次渲染时的handler引用——也就是上一次添加到document上的那个监听函数。

所以当你用return () => document.removeEventListener('click', handler)时：

• 下一次渲染前，先执行上一次的cleanup，精准移除上一次绑定的旧handler；
• 然后再执行当前的useEffect，添加新的handler；
• 始终保持document上只有一个有效的click监听。

额外场景：组件卸载时的内存泄漏 #

如果组件被卸载（比如路由跳转），你的方案里useEffect不会再执行，那些没被移除的监听会一直挂在document上，造成内存泄漏；而cleanup函数会在组件卸载时自动执行，帮你清理掉监听，避免这个问题。

修正后的代码示例 #

const [clickCount, setClickCount] = useState(0)

const handler = () => {
  console.log('Clicked')
  setClickCount(clickCount + 1)
}

useEffect(() => {
  document.addEventListener('click', handler)
  // 用cleanup移除上一次的监听
  return () => document.removeEventListener('click', handler);
})

内容的提问来源于stack exchange，提问作者Exter