为什么React中setTimeout内useState两种更新方式多次点击结果不同？

本质是React函数组件的闭包快照特性和useState更新函数的两种传参逻辑差异导致的：

1. setValue(value + 1) 仅更新1次的原因 #

• React函数组件每一次渲染都会生成独立的作用域，当前渲染帧里的所有变量、函数都是当时状态的快照，不会随时间变化。
• 所有点击操作都发生在2秒的定时器触发之前，此时组件还没有触发重渲染，所有点击触发的counter函数，捕获的都是初始渲染帧里的value = 0这个固定值。
• 2秒后所有定时器回调依次执行，每次执行setValue(value + 1)本质都是执行setValue(0 + 1)，相当于多次把value设置为相同的1，React会合并重复的状态更新，最终只生效1次。

2. 函数式更新setValue((prevState) => prevState + 1) 次数匹配的原因 #

• useState返回的更新函数支持传入回调作为参数，React在执行这个回调时，会主动传入当前最新的状态值作为回调的入参，完全不受当前闭包捕获的旧快照值影响。
• 每个定时器回调执行时，拿到的prevState都是上一次状态更新后的最新值，每次加1的操作都是基于最新值计算，所以点击多少次就会累加多少次，最终结果和点击次数完全一致。

内容的提问来源于stack exchange，提问作者Domino