使用 useRef 解决闭包陷阱的问题

在我们日常开发过程中可能会遇到定时器中的state获取不到最新状态，这种现象被称为“闭包陷阱”或者被叫做“Capture Value” 。

如下：

我们发现弹出的值和当前页面显示的值并不相同

logHandle方法里面的data和点击动作触发那一刻的data相同，但是data后续变化并不会对logHandle内的data造成任何影响

函数式组件每次render 都会生产一个新的 logHandle 函数，这个新的 logHandle 函数会产生一个在当前这个阶段 data 值的闭包。

接下来我们对上面例子进行简单分析：

首次渲染页面，这个时候我会生成一个logHandle的函数 （data = 1）

data为1时 点击alert触发logHandle函数（data = 1）

点击 add 增加data，比如data增加到10，这个时候组件render，会生成一个在当前阶段的logHandle函数（data = 10）并不会影响首次页面加载时生成的logHandle函数

最后定时器触发，logHandle函数（data = 1），弹出闭包内的data为1

如何让弹窗中展示最新的data值呢？

我们可以通过 React hooks中的 useRef 来简单解决闭包陷阱的问题

 useRef 每次 render 时都会返回同一个引用类型的对象，我们设置值和读取值都在这个对象上处理，这样就能获取到最新的 value 值了。