#不应该有闭包陷阱这个问题

总感觉很多文章都提到闭包陷阱

奇怪的是我平时的开发并没有遇到过

我感觉闭包陷阱并没有必要称为陷阱，而仅仅是闭包特性，来源于 react 的特性（心智负担？）

就如 dan 所说：useEffect 拿到的总是定义它的那次渲染中的 props 和 state。这能够避免一些 bugs，但在一些场景中又会有些讨人嫌。

具体特性可以阅读 dan 佬的博客文章useEffect 完整指南

#闭包陷阱

function Counter() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    setInterval(() => {
      console.log('setInterval:', count)
    }, 3000)
  }, [])

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount((pre) => pre + 1)}>加一</button>
    </div>
  )
}

上面这个案例，一直点击加一按钮，打印的一直是 0，这就是所谓的闭包陷阱

这个问题在于 useEffect 的 deps 填的是[]，那只有第一次渲染才会使用闭包保存 state，此时 count 就是 0

更像是对 api 的不正确使用，总不能因为 react 所有的渲染问题都是因为函数组件闭包而叫闭包陷阱吧

react 的函数组件会在每次渲染保存那次渲染的 props 和 state（闭包）

这就是闭包特性，和函数的闭包类似的特性，这就是为什么写 react 像写 js，不仅仅是因为 jsx

23.08.03