闭包陷阱
小于 1 分钟
闭包陷阱
- 当异步函数获取 state 时,可能不是当前最新的 state
- 可使用 useRef 来解决
- (要提前了解JS 闭包)
深入原理
useState
产生的数据也是 Immutable 的,通过数组第二个参数 Set 一个新值后,原来的值会形成一个新的引用在下次渲染时。- 但由于对 state 的读取没有通过
this.
的方式,使得 每次setTimeout
都读取了当时渲染闭包环境的数据,虽然最新的值跟着最新的渲染变了,但旧的渲染里,状态依然是旧值。
对比Class Component
首先对 Class Component 进行解释:
- 首先 state 是 Immutable 的,
setState
后一定会生成一个全新的 state 引用。 - 但 Class Component 通过
this.state
方式读取 state,这导致了每次代码执行都会拿到最新的 state 引用,所以快速点击三次的结果是3 3 3
。