使用useState时，无prevState的箭头函数与直接传数据的区别咨询

嘿，这个问题在React开发者圈子里其实挺常见的，我来给你把这两种写法的差异捋明白～

先明确两种写法的本质 #

• 你的写法（函数式更新）：setSeriesData(() => { /* 逻辑 */ return arr })，React会在处理状态更新时调用这个箭头函数，把函数的返回值作为新的状态。
• 同事的写法（直接传值）：setSeriesData(arr)，React直接把arr作为新状态赋值。

执行情况与额外操作 #

先聊你最关心的“额外操作”：函数式更新确实会多一次函数调用的开销，但这个开销极其微小——就好比你多调用了一个空函数，在几乎所有业务场景下都不会对应用性能产生可感知的影响，完全不用过度担心。

那React为什么要提供函数式更新这个API？它的核心作用是当新状态依赖于前一次的状态值的时候，比如：

setCount(prevCount => prevCount + 1)

因为React的状态更新可能是异步批量处理的，如果直接写setCount(count + 1)，有时候会拿不到最新的count值，导致更新出错。但如果你的更新逻辑完全不依赖之前的状态，函数式更新的这个优势就用不上了。

代码可读性与规范建议 #

从代码可读性和社区实践的角度来说，同事的写法更推荐：

• 直接传值的写法更直观，其他开发者一眼就能看出来这个状态更新不依赖之前的状态，不需要额外去看函数内部逻辑。
• 函数式更新通常被社区默认为“依赖prevState时才用”的写法，滥用的话反而会让代码显得冗余，增加不必要的理解成本。

当然，如果你的更新逻辑非常复杂，或者你预判未来可能会修改成依赖prevState的逻辑，提前写成函数式也没问题——但如果只是当前这种简单场景，直接传值是更清爽的选择。

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