React中setSeconds两种写法的差异及第一种写法原理解析

核心区别 #

• setSeconds((seconds) => seconds + 1)：采用函数式更新，基于React内部维护的最新state值计算新状态
• setSeconds(seconds + 1)：采用值更新，依赖当前作用域中seconds变量的快照值

第一行代码执行逻辑 #

调用带函数参数的setSeconds时，流程是这样的：

1. React自动将组件当前最新的seconds state值作为参数传入箭头函数
2. 箭头函数接收这个最新值，执行seconds + 1计算出新的状态数值
3. React获取到新值后，更新组件的seconds state，并触发组件重新渲染

函数式更新的适用场景 #

像计时器这种需要频繁、连续更新状态的场景，或者短时间内多次触发状态更新时，当前作用域中的seconds可能因闭包特性保留旧值，用值更新会导致计算偏差。而函数式更新每次都取React内部维护的最新state，能保证计算结果准确。

内容的提问来源于stack exchange，提问作者Zain Ul Abideen