老师，这里为什么不清空定时器就会变乱，添加了返回清空定时器的回调就正常了呢？

Answer 1

河畔一角 2023-06-07 22:26:08

定时器里面的状态发生变化时，会重复创建定时器，添加清空以后能够保证内存不会遗漏，同时引用一致性。

Answer 2

提问者 CoderVi 2023-06-07 22:44:02

我明白了，这里老师说的变乱就是每次+2。这是因为React严格模式下useEffect被调用了两次导致的，添加了清除定时器的回调函数之后会把第一次的定时器给清除掉。useEffect会在组件渲染后执行，而且每次组件重新渲染时，都会先运行上一次useEffect中返回的清理函数，然后再执行新的useEffect。当组件卸载时，执行最后一次返回的清理函数，清除最后一次设定的定时器。

• 河畔一角 #1

  大概是这么理解的，我之前的回复可能也还是有点模糊，这个问题不是很好回答，里面的关系比较复杂。数字乱跳就是创建了多个定时器导致状态不一致。

• 提问者 CoderVi 回复 河畔一角 #2

  明白，我是指视频当时的那种状态。具体的变乱表现根据依赖项、更新函数（方式）的不同会不一样，但本质都是因为创建了多个定时器。

• 皮小西 #3

  非常感谢！

Answer 3

河畔一角 2023-06-07 22:17:38

闭包的作用，清空的回调方法形成闭包对定时器有引用。不添加清空，定时器下一次进来获取的count不是最新的，因为可能没有更新，引用以后，能保证每次进来count都是最新的。

• 提问者 CoderVi #1

  老师我说一下我的理解：
  首先视频里说的变乱就是每次+2。这是因为React严格模式下useEffect被调用了两次导致的，添加了清除定时器的回调函数之后会把第一次的定时器给清除掉。
  这里涉及到的基础问题是useEffect的执行方式：useEffect会在组件渲染后执行，而且每次组件重新渲染时，都会先运行上一次useEffect中返回的清理函数，然后再执行新的useEffect。当组件卸载时，执行最后一次返回的清理函数，清除最后一次设定的定时器。
  其次是闭包的问题：
  定时器创建的内部函数是一个闭包，这里的count是创建之初的初始值0，并不是一个传进来的变量，如果不采用函数式更新，setCount每次取到的都是闭包里的count=0，所以count会一直等于0。而在setCount方法中采用函数式更新的时候，使用useState创建的更新函数会自动去获取对应setCount方法的count变量的最新值。