React函数组件和类组件计时器：闭包问题如何解决？

React函数组件与类组件计时器：闭包问题及解决方案

本文分析React函数组件和类组件实现秒表功能的差异，并重点解决函数组件中常见的闭包问题。

文章对比了两种实现方式：基于类组件和基于函数组件的秒表。类组件利用setInterval和setState在componentDidMount生命周期内启动计时器并更新状态。函数组件则使用useEffect Hook和setInterval，但更新状态的方式不同，容易产生闭包问题。

函数组件的初始代码存在一个问题：计数器无法每秒递增。这是因为setInterval回调函数引用了函数组件作用域内的变量，每次回调时，该变量的值都是初始值，导致计数器只能增加1。这就是闭包陷阱。

文章提供了三种解决方法：

1. 将计数器变量添加到useEffect依赖数组: 将计数器变量添加到useEffect的第二个参数（依赖数组）中。这样，每次计数器变量变化时，useEffect都会重新执行，确保setInterval回调函数使用的是最新值。然而，这种方法依赖于计数器变量本身的变化，在某些情况下可能不够灵活。

2. 使用函数式状态更新: 使用setCount(prevCount => prevCount + 1)代替setCount(a + 1)。函数式更新接收当前状态作为参数，返回新的状态值，避免了闭包问题。这是推荐的方法，因为它充分利用了React状态更新机制。

3. 使用useRef保存计数器值: 使用useRef创建一个可变引用来保存计数器值。setInterval回调函数直接修改这个引用，避免了闭包问题。这种方法虽然有效，但比函数式更新略显复杂。

通过以上三种方法，可以有效解决函数组件中的闭包问题，使其正确实现秒表功能。类组件则不存在此问题，因为它直接使用this.state，每次setState都会更新组件状态。