fix: closure trap

Author: ceilf6

React/sandboxs/src/App.jsx

@@ -25,6 +25,7 @@ import CountDown from './pages/CountDown.jsx'
 import { Modal } from './components/index.js'
 
 import This from './test/This.js'
+import Num from './test/Num.js'
 
 const el = (
     <>
@@ -41,6 +42,7 @@ const el = (
         </Modal>
 
         <This/>
+        <Num/>
     </>
 )
 

React/sandboxs/src/test/Num.js

@@ -0,0 +1,33 @@
+import React, { useState, useEffect, useRef } from "react"
+
+export default function () {
+    const [num, setNum] = useState(0)
+
+    // useEffect(() => {
+    //     setInterval(() => {
+    //         console.log(num)
+    //     }, 1000)
+    // }, [])
+
+    useEffect(() => {
+        const timer = setInterval(() => {
+            console.log(num)
+        }, 1000)
+        return () => clearInterval(timer)
+    }, [num])
+
+    const curNumRef = useRef(num)
+    curNumRef.current = num // 更新、同步
+    useEffect(() => {
+        const timer = setInterval(() => {
+            console.log('===cur num ref', curNumRef.current)
+        }, 1000)
+        return () => clearInterval(timer)
+    }, [])
+
+    return (
+        <button onClick={() => setNum(num + 1)}>
+            {num}
+        </button>
+    )
+}