React中的闭包陷阱

复制代码

import React, { FC, useState, useRef, useEffect } from 'react'

const App: FC = () => {
  // 1. 使用 useState 声明状态
  // React 会在每次重新渲染时，给 `count` 赋予最新的值。
  // 但是，在事件处理函数（如 alertFn）的"闭包"中，捕获的是函数定义时的那个快照。
  const [count, setCount] = useState(0)

  // 2. 使用 useRef 声明一个可变的引用
  // `useRef` 返回一个普通的 JavaScript 对象 { current: 0 }。
  // 这个对象在整个组件的生命周期中是**同一个**对象，不会因为重新渲染而改变引用。
  // 修改 `countRef.current` 不会引起组件重新渲染。
  const countRef = useRef(0)
  
  // 3. 同步副作用
  // 每当 `count` 状态发生变化时，我们手动更新 `countRef.current` 的值。
  // 这样做是为了让 `countRef.current` 始终保持和最新的 `count` 状态同步。
  useEffect(() => {
    countRef.current = count
  }, [count]) // 依赖数组：仅在 count 变化时执行

  // 4. 增加计数的函数
  // 点击按钮会触发状态更新，导致组件重新渲染。
  function add() {
    setCount(count + 1)
  }

  // 5. 弹窗函数（演示闭包陷阱与解决方案）
  function alertFn() {
    // 设置一个 3 秒后的定时器
    setTimeout(() => {
      // ❌ 如果直接使用 `count` (普通变量/快照):
      // 如果你在点击 "alert" 后、3秒等待期间点击了 "add" 按钮，
      // `count` 的值在定时器内部依然是旧的（例如 0），因为它捕获的是点击 "alert" 那一刻的值。
      // 这就是所谓的"闭包陷阱"或"过时的闭包"。

      // ✅ 现在使用 `countRef.current`:
      // `countRef` 对象本身在组件生命周期中是不变的。
      // 虽然闭包捕获的是同一个 `countRef` 对象，但我们访问的是它的 `.current` 属性。
      // 由于 useEffect 的同步作用，`.current` 里存的是最新的 `count` 值。
      // 所以无论你在 3 秒内点击了多少次 add，alert 显示的都是最新的数字。
      alert(`当前最新的 count 值是: ${countRef.current}`)
    }, 3000)
  }

  return (
    <>
      <p>闭包陷阱演示</p>
      <div>
        {/* 显示当前状态 */}
        <span>屏幕显示: {count}</span>
        {/* 触发状态更新 */}
        <button onClick={add}>add</button>
        {/* 触发异步操作 */}
        <button onClick={alertFn}>3秒后 alert 最新值</button>
      </div>
    </>
  )
}

export default App

如何测试：

点击 add 按钮几次，比如让数字变成 5。
立刻点击 alert 按钮。
在等待 3 秒的过程中，继续疯狂点击 add 按钮（比如加到 10）。
结果： 3 秒后弹出的框显示的是 10，而不是你点击 alert 那一刻的 5。这就是 useRef 解决闭包陷阱的威力。

React中的 闭包陷阱

React中的闭包陷阱