React useState使用出现异常行为 奇怪输出、引用不一致等问题求解

问题1：点击事件内部输出的引用值与组件外层输出的引用值不一致 #

这个是典型的函数组件闭包陷阱：

• 每次组件触发重渲染时，整个App函数都会完整执行一遍，生成全新的函数作用域，对应的currentReference、clicked函数都是全新的实例
• 按钮上绑定的clicked函数是上一次渲染生成的，它会捕获上一次渲染作用域里的currentReference值
• 你触发点击后组件会重新渲染，外层输出的是新作用域的currentReference，而点击事件里输出的是旧作用域捕获的值，自然就不一致了

问题2：useState的取值前两次点击无变化，第三次点击才发生变更 #

原因结合了闭包特性和React的状态更新逻辑：

• 首先，v是App函数内部的局部变量，每次渲染都会重新赋值为"10"，所以每次生成的clicked函数里，拼接后的v永远是"10 20"
• 第一次点击时，你把val从初始的"30"更新为"10 20"，触发重渲染，这时候如果在点击事件里读val，拿到的是旧渲染作用域捕获的"30"，所以你会觉得值没变化
• 第二次点击时，你传入setVal的还是"10 20"，React会比较新旧状态，发现完全相等就会跳过更新，不会触发重渲染，所以val看起来还是没变
• 如果你观察到第三次才变化，大概率是连续点击过程中，偶发的重渲染逻辑触发了更新，本质还是因为你每次传入setVal的值都相同，React默认会跳过无意义的重复更新

问题3：giveNewRef()函数的返回值每次递增2，而非预期的1 #

这个是React开发环境下<React.StrictMode>（官方脚手架默认会给根组件包裹）的特性导致的：

• 为了帮开发者检测不安全的副作用，React在开发环境的严格模式下，会故意把组件函数调用两次
• 你每次触发组件重渲染时，App函数会被执行两遍，giveNewRef自然也会被调用两次，所以全局变量referceGiver每次就会递增2，生产环境下不会有这个问题

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