React useEffect返回函数作用及代码差异技术咨询

我遇到一段React代码：

const [count, setCount] = useState(0);
useEffect(() => {
  const timerId = setTimeout(() => setCount(count + 1), 1000);
  return () => setTimeout(timerId);
});

我之前了解的useEffect基本用法是这样的：

useEffect(() => {
  // 执行一些操作
});

但这段代码里的useEffect内部返回了一个函数，我想搞清楚：带返回函数的版本和下面这个无返回的版本有什么区别，以及它的工作原理：

useEffect(() => {
  setTimeout(() => setCount(count + 1), 1000);
});

先搞懂：useEffect返回的是「清理函数」 #

React里，useEffect的回调可以返回一个函数，这个函数就是清理函数，它的核心作用是帮你清理副作用：

• 组件卸载时，自动执行它，用来销毁定时器、取消订阅、移除事件监听这类可能导致内存泄漏的东西
• 如果useEffect没加依赖数组，那每次组件重新渲染前，都会先跑上一次的清理函数，再执行新的effect回调

另外提一句：你代码里的return () => setTimeout(timerId);明显是笔误，正确写法应该是return () => clearTimeout(timerId);——setTimeout返回的timerId是用来取消定时器的，得用clearTimeout，下面的分析都基于这个修正后的正确写法。

两个版本的具体区别 #

1. 无清理函数的版本（你的第二个代码） #

useEffect(() => {
  setTimeout(() => setCount(count + 1), 1000);
});

• 因为没有依赖数组，每次组件渲染（包括第一次加载）都会触发这个effect
• 每次渲染都会新建一个定时器，旧的定时器不会被取消
• 举个例子：如果组件在1秒内重新渲染了3次，就会同时存在3个定时器，1秒后它们都会执行setCount，导致count一下子加3，完全不符合每秒加1的预期
• 更糟的是，如果组件卸载了（比如跳去别的页面），没执行的定时器还会留在内存里，不仅浪费资源，甚至可能在组件卸载后调用setCount，触发React的警告

2. 带清理函数的版本（修正后） #

const [count, setCount] = useState(0);
useEffect(() => {
  const timerId = setTimeout(() => setCount(count + 1), 1000);
  return () => clearTimeout(timerId);
});

• 同样没加依赖数组，但每次组件重新渲染前，会先执行上一次的清理函数，把上一次的定时器取消
• 这样一来，不管组件怎么频繁渲染，始终只有当前最新的定时器在运行，不会出现多个定时器同时触发的情况
• 当组件卸载时，清理函数也会自动执行，把剩余的定时器取消，避免内存泄漏和无效的状态更新

（额外补充：这段代码还有个小问题——因为用了count + 1，闭包会捕获旧的count值，可能导致定时器执行时更新的不是最新值。如果要实现稳定的每秒加1，建议用setCount的函数式更新：setCount(prev => prev + 1)，同时可以把依赖数组设为空，或者用useRef存timerId，不过这属于优化范畴，和你问的清理函数区别无关，就不多展开了）

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