连续更新为什么用函数式 updater
先理解原理和示例,再练习完整口述与追问。
回答要点
更新队列;闭包所属渲染。
原理拆解
当本次 count 为 0,三次 setCount(count+1) 都计算成“设为 1”,更新队列中重复替换为同一个值,不是依次把闭包里的 count 递增。函数式 updater 则接收队列中前一步计算后的状态,React 依次执行,因而可以累加。updater 必须纯净,不能在里面发请求或写日志作为唯一业务副作用。
示例与推演
// 同一事件中,当前 count 为 0
setCount(count + 1)
setCount(count + 1)
setCount(count + 1) // 结果为 1
// 若从 0 开始改用下列三次:
setCount(n => n + 1)
setCount(n => n + 1)
setCount(n => n + 1) // 结果为 3
这两组应分别分析,不能把六句连续执行还期待得到 3;混合替换值和 updater 要逐项推导队列。
易错点
不同用户点击不是同一轮无条件合并。开发模式可能额外调用 updater 检查纯度,但不会要求你人为扣掉一次更新。
参考回答可直接练习口述
同一回调中的 count 固定,重复 setCount(count + 1) 是重复提交同一个替换结果;setCount(c => c + 1) 则把每个更新的计算串在待处理状态上。回调闭包保留定义时的值,异步等待不会自动换到最新渲染,所以依赖前值时用 updater,依赖外部输入时正确声明和管理同步。