返回知识详解
React 方向

useState 与渲染快照

为什么一次事件里多次 setState(count+1) 只加了一次,函数式更新如何解决。

state 是本次渲染的快照

每次渲染,组件函数里的 state 变量是一个「定格的快照」,在本次渲染期间不会变。一次事件里多次 setCount(count + 1)count 始终是渲染时那个值,于是三次都是「设为同一个值」,合并后只生效一次。

要基于最新值连续更新,请用函数式更新 setCount(c => c + 1),React 会把更新函数排队依次应用。在下面的 Playground 里对比两个按钮。

可运行 Playground
加载交互编辑器…
学完了?做几道题巩固一下
针对「React 方向」范围练习