什么是事件池反应? [英] What is event pooling in react?

问题描述

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

The SyntheticEvent is pooled. This means that the SyntheticEvent object will be reused and all properties will be nullified after the event callback has been invoked. This is for performance reasons. As such, you cannot access the event in an asynchronous way.

refer: React中的事件系统

推荐答案

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

It means that the properties of the event only exist while the callback is active. Adding async to the mix, or storing the event for future use, will fail.

如果您在事件处理程序中尝试console.log(event)，则很容易观察到.在您检查对象时，事件对象上的大多数属性将为null.如果您在记录该值后立即使用debugger;停止执行脚本，则可以检查这些值.

This is easily observed if you try console.log(event) inside an event handler. By the time you inspect the object, most properties on the event object will be null. If you stop execution of the script with debugger; immediately after logging the value, you can inspect the values.

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仍会存储直到下一个事件发生为止，并且不会无效.

This will log a DOM element when you click the button, and null a second later. For reasons beyond me, event.target is still stored until the next event occurs, and not nullified.

这篇关于什么是事件池反应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！