闭包陷阱

闭包陷阱

• 当异步函数获取 state 时，可能不是当前最新的 state
• 可使用 useRef 来解决
• （要提前了解JS 闭包）

深入原理

1. useState 产生的数据也是 Immutable 的，通过数组第二个参数 Set 一个新值后，原来的值会形成一个新的引用在下次渲染时。
2. 但由于对 state 的读取没有通过 this. 的方式，使得 每次 setTimeout 都读取了当时渲染闭包环境的数据，虽然最新的值跟着最新的渲染变了，但旧的渲染里，状态依然是旧值。

对比Class Component

首先对 Class Component 进行解释：

1. 首先 state 是 Immutable 的，setState 后一定会生成一个全新的 state 引用。
2. 但 Class Component 通过 this.state 方式读取 state，这导致了每次代码执行都会拿到最新的 state 引用，所以快速点击三次的结果是 3 3 3。