React受控组件异步onChange中合成事件对象的行为疑问

复现代码 #

function Test(){
async function changer(ev:any){
let a=10;
console.log(ev.target.value) // 读取正确的更新后状态值
await chrome.storage.sync.get("sync") // 如果使用await就无法读取新值
// 正常工作的写法
// chrome.storage.sync.get("sync").then((val)=>{
//  console.log(ev.target.value,a)
//})    
console.log(ev.target.value) // ev.target.value读取旧的状态值 
setVal(ev.target.value);
}
let [val,setVal]=useState("one");
return <>
<select value={val} onChange={changer}>
    <option value="one">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
</>
}

let root=createRoot(document.querySelector("body"));
root.render(<></>)

问题描述 #

1. 自React 17起，事件对象不再被池化，因此即使处理器是异步的，事件对象也应保持一致。但await后的语句读取的是状态值而非受控select组件的新选中值，这是为什么？
2. 由于value属性绑定到状态，event.target.value应指向状态而非select元素的选中值。为何React能区分该值，event.target是否并非实时对象？
3. 当异步处理器返回未兑现的Promise时，事件对象会被销毁吗？React所称的合成事件对象会发生什么变化？

预期行为：两次console.log(ev.target.value)均输出用户选中的新值，但实际第二次输出旧状态值。

解答 #

问题1：await后读取旧值的核心原因 #

React 17取消合成事件池化不是问题的关键，本质是受控组件的强制同步逻辑和状态更新的时机：

• 触发onChange时，用户选中的新值会先同步到原生DOM的select.value，此时第一个console.log能读到这个新值。
• 在await等待异步操作的过程中，React会将受控组件的value强制同步回当前未更新的状态val（因为setVal还未执行），所以当await结束后，ev.target.value已经被React重置为旧状态值。
• 只有当后续调用setVal更新状态后，组件重新渲染，select的value才会同步为新状态值。

问题2：React对受控组件值的处理逻辑 #

• ev.target是对原生DOM元素的真实引用，但受控组件的value完全由React状态驱动：用户手动选择新选项时，原生DOM的value会短暂变为新值，但React会立刻将其重置为value属性绑定的当前状态值（旧值），直到状态更新完成、组件重新渲染。
• 这就是为什么事件触发初期能读到新值，异步操作后却读到旧值——不是event.target不实时，而是它的value被React的受控逻辑修改了。

问题3：未兑现Promise时的合成事件对象变化 #

React 17及以后，合成事件对象不再被池化复用，无论异步处理器的Promise是否兑现，事件对象都不会被主动销毁，它会一直存在，直到JS垃圾回收机制将其回收。你遇到的取值变化，和事件对象本身的生命周期无关，完全是受控组件的value同步逻辑导致的。

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