什么是事件汇集反应？

Question

SyntheticEvent汇集在一起​​.这意味着将重用SyntheticEvent对象,并且在调用事件回调后,所有属性都将无效.这是出于性能原因.因此,您无法以异步方式访问事件.

参考:React中的事件系统

Answer 1

事件池 -React使用SyntheticEvent，它是本机浏览器事件的包装，因此它们在不同浏览器中具有一致的属性。除非我们使用nativeEvent属性获取基础浏览器事件，否则任何react-app中具有的事件处理程序实际上都是传递的SyntheticEvent实例。

包装本机事件实例可能会导致性能问题，因为创建的每个综合事件包装器也都需要在某个时候进行垃圾回收，这在CPU时间方面可能是昂贵的。

React通过分配一个合成实例池来解决这个问题。每当触发事件时，事件都会从池中获取一个实例，并填充其属性并重用它。当事件处理程序完成运行时，所有属性都将无效，并且合成事件实例将释放回池中。因此，提高了性能。

Answer 2

这意味着事件的属性仅在回调处于活动状态时存在.向混合添加异步或存储事件以供将来使用将失败.

如果您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仍然存储直到下一个事件发生,并且不会无效.

Answer 3

请注意，它event pooling已从 React 17 中删除，原因如下。

\n

React 17 removes the \xe2\x80\x9cevent pooling\xe2\x80\x9d optimization from React. It doesn\xe2\x80\x99t improve performance in modern browsers and confuses even experienced React users

\n

https://reactjs.org/blog/2020/08/10/react-v17-rc.html#no-event-pooling

\n