SyntheticEvent 被合并。这意味着 SyntheticEvent 对象将被重用，并且在调用事件回调后所有属性都将被取消。这是出于性能原因。因此，您无法以异步方式访问事件。
参考：React 中的事件系统
什么是react中的事件池？
IT技术
javascript
reactjs
2021-01-14 02:51:11
3个回答
事件池- React 使用SyntheticEvent，它是原生浏览器事件的包装器，以便它们在不同浏览器之间具有一致的属性。我们在任何 react-app 中的事件处理程序实际上都是传递 SyntheticEvent 的实例，除非我们使用nativeEvent属性来获取底层浏览器事件。
包装本机事件实例可能会导致性能问题，因为创建的每个合成事件包装器也需要在某个时候进行垃圾收集，这在 CPU 时间方面可能会很昂贵。
React 通过分配合成实例池来解决这个问题。每当触发事件时，它都会从池中获取一个实例并填充其属性并重用它。当事件处理程序完成运行时，所有属性都将被取消，合成事件实例将被释放回池中。因此，提高性能。
这意味着事件的属性仅在回调处于活动状态时存在。将异步添加到混合中，或存储事件以备将来使用，都将失败。
如果您console.log(event)在事件处理程序中尝试，这很容易观察到。到您检查对象时，事件对象上的大多数属性都将是null. 如果debugger;在记录值后立即停止执行脚本，则可以检查这些值。
class MyComponent extends React.Component {
handleClick (e){
console.log('The event currentTarget is', e.currentTarget); // DOM element
setTimeout(() => {
console.log('event.currentTarget was', e.currentTarget); // null
}, 1000)
}
render () {
return <button onClick={this.handleClick}>Fire event!</button>
}
}
当您单击按钮时，这将记录一个 DOM 元素，null一秒钟后。出于我以外的原因，event.target仍然存储到下一个事件发生之前，并且不会被取消。
被告知event pooling从 React 17 中删除，引用以下原因。
React 17 removes the “event pooling” optimization from React. It doesn’t improve performance in modern browsers and confuses even experienced React users
https://reactjs.org/blog/2020/08/10/react-v17-rc.html#no-event-pooling