为什么React中counter++效果与counter+1不一致，需双击才生效？

首先明确React useState的两个核心规则：

• 每次组件渲染时，解构拿到的counter是当前渲染周期的独立快照值，默认声明为const的情况下本身不可被修改
• 只有调用setCounter传入的新值才会修改state，直接修改counter变量本身对state没有任何影响，也不会触发组件重新渲染

两种写法的差异 #

• setCounter(counter + 1)：该写法没有修改原counter变量，直接基于当前渲染周期的快照值计算出新值传入setCounter，每次点击都能正确提交新值，触发视图正常更新。
• setCounter(counter++)：你遇到的双击生效问题就是这个写法导致的，核心有两个原因：
  1. 后置自增运算符++的执行逻辑是先返回变量的当前值，再执行自增操作，所以你实际传给setCounter的是还没自增的旧值，相当于第一次点击提交的state值没变，组件不会重新渲染，视图自然不会更新。
  2. 如果你修改了解构语法，把const [counter, setCounter]改成了let [counter, setCounter]，那counter变量是可以被修改的：第一次点击时counter++会把当前作用域内的counter临时改成1，但因为传给setCounter的是旧值0，state没更新，组件不会重渲，所以当前作用域的临时counter值会保留为1；第二次点击时，counter++返回1传给setCounter，state更新为1，此时组件重渲，你才会看到数值加1，表现出来就是需要双击才生效。

最佳实践 #

如果要避免依赖当前渲染快照的问题，推荐使用函数式更新写法，直接基于上一次最新的state计算新值：

setCounter(prev => prev + 1)

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