React中useState两种更新方式差异及循环失效原因咨询

两种写法的工作原理 #

1. 直接引用当前状态：setGrids([...grids, grid]) #

当你在useEffect的循环里用这种写法时，grids是当前渲染周期的状态快照——也就是useEffect执行时grids的初始值（比如空数组）。

循环里的每一次setGrids调用，都是基于这个固定的初始快照去扩展数组。比如第一次循环是[...[], 1]，第二次还是[...[], 2]，直到最后一次[...[], 196]。

React会把同步触发的多次状态更新合并成一次批量更新，所以最终只会保留最后一次更新的结果，也就是只包含196的数组。

2. 函数式更新：setGrids(grids => [...grids, grid]) #

这种写法传入的是一个回调函数，React在处理状态更新时，会自动把最新的状态值作为参数传给这个回调。

循环里的每一次调用，都会基于上一次更新后的最新状态来添加新值：第一次用空数组生成[1]，第二次用[1]生成[1,2]，以此类推，直到最终得到包含1到196的完整数组。

这种写法绕开了闭包陷阱，确保每次更新都依赖的是最新的状态，而不是useEffect执行时捕获的旧快照。

核心差异原因 #

• 直接写法依赖的是useEffect回调创建时捕获的状态闭包，循环中所有更新共享同一个旧状态，导致批量更新后只保留最后一次的结果。
• 函数式更新让React负责传递最新状态，每次更新都基于前一次的最终状态，保证了更新的连续性和正确性。

内容的提问来源于stack exchange，提问作者jr-kick