Question

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

Answer 1

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

如果在事件处理程序中尝试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 2

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

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

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

什么是事件汇集反应？

2 个答案: