React：在setState回调中调用函数props是否安全？对生命周期有何影响？

核心结论 #

在setState的函数式更新回调（即接收prev状态参数的函数）中调用props传入的onToggle是安全且推荐的写法，能彻底规避异步状态更新带来的取值错误问题。

为什么这种写法更可靠？ #

React官方明确指出：状态更新可能是异步的——React会批量处理多个状态更新以优化性能，因此你无法在调用setState后立即获取到更新后的状态值。

结合你给出的示例来看：

• 第二种写法里，onToggle(e, !active)直接使用闭包捕获的active值，由于setState的异步特性，这个active大概率还是更新前的旧值，会导致传给父组件的状态和子组件实际要更新的状态不一致。
• 第一种写法通过prev参数拿到当前状态的最新快照，传给onToggle的!prev是准确的新状态值，完全不受异步更新的影响。

对组件生命周期与事件持久化的影响 #

1. 组件生命周期

如果onToggle被父组件用来更新自身状态，在子组件的setState函数式回调中调用它，能保证状态更新流程的顺序性：

• 子组件先基于最新的前状态计算出要更新的新值
• 调用onToggle触发父组件的状态更新
• React后续会协调父子组件的更新，不会出现生命周期阶段的异常（比如在渲染阶段意外触发状态更新）
• 从根本上避免父子组件状态不一致的情况，防止UI渲染错误。

2. 事件持久化

示例中的e是React合成事件，React会在事件处理函数执行完毕后回收这些事件对象。但在setState的函数式更新回调中调用onToggle是同步执行的，此时合成事件还未被回收，直接使用e完全没问题。
如果onToggle内部包含异步逻辑（比如调用API），则需要提前调用e.persist()来保留事件对象，否则异步操作中访问e会获取到已被回收的空对象。

示例代码对比 #

推荐的写法：

const handleChange = (e) => {
  setActive(prev => {
    onToggle(e, !prev);
    return !prev;
  });
}

不推荐的写法（存在状态取值错误风险）：

const handleChange = (e) => {
  setActive(prev => !prev);
  onToggle(e, !active);
}

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