react函數組件與類組件計時器：閉包問題及解決方案
本文分析React函數組件和類組件實現秒表功能的差異，并重點解決函數組件中常見的閉包問題。
文章對比了兩種實現方式：基于類組件和基于函數組件的秒表。類組件利用setInterval和setState在componentDidMount生命周期內啟動計時器并更新狀態。函數組件則使用useEffect Hook和setInterval，但更新狀態的方式不同，容易產生閉包問題。
函數組件的初始代碼存在一個問題：計數器無法每秒遞增。這是因為setInterval回調函數引用了函數組件作用域內的變量，每次回調時，該變量的值都是初始值，導致計數器只能增加1。這就是閉包陷阱。
文章提供了三種解決方法：
-
將計數器變量添加到useEffect依賴數組: 將計數器變量添加到useEffect的第二個參數（依賴數組）中。這樣，每次計數器變量變化時，useEffect都會重新執行，確保setInterval回調函數使用的是最新值。然而，這種方法依賴于計數器變量本身的變化，在某些情況下可能不夠靈活。
-
使用函數式狀態更新: 使用setCount(prevCount => prevCount + 1)代替setCount(a + 1)。函數式更新接收當前狀態作為參數，返回新的狀態值，避免了閉包問題。這是推薦的方法，因為它充分利用了React狀態更新機制。
-
使用useRef保存計數器值: 使用useRef創建一個可變引用來保存計數器值。setInterval回調函數直接修改這個引用，避免了閉包問題。這種方法雖然有效，但比函數式更新略顯復雜。
通過以上三種方法，可以有效解決函數組件中的閉包問題，使其正確實現秒表功能。類組件則不存在此問題，因為它直接使用this.state，每次setState都會更新組件狀態。
