Question

我看到了其他一些帖子，但听不懂。

如果我有一张大桌子，每行都有一个可点击的操作按钮。

<tbody>
<tr>
   <td><button onClick={this.handleClick}></button></td>
</tr>
</tbody>

在jquery中，我将事件绑定到<tbody>元素，因为我知道它具有更好的性能。作为响应，如果我将click事件直接绑定到按钮，则实际上创建了多少个处理程序？它会和事件委托一样高效吗？

我尝试在<tbody>上使用onClick，当我在控制台中访问事件对象时，看到以下警告：

Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property `altKey` on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist().

Answer 1

我相信有3个不同的问题。

是否可以使用委托？是的，您可以在<tbody>上设置单个事件处理程序，并检查event.currentTarget.<some attribute to know what it is>。

为什么显示警告？这是因为事件对象实际上已被重用，所以如果您的处理程序以异步方式使用Event

handleClick(event) {
    setTimeout(() => {
        alert(event.target.id);
    }, 100);
}

您不确定这是同一事件。您应该立即存储所需的信息，以后再使用

handleClick(event) {
    let id_to_store = event.target.id;
    setTimeout(() => {
        alert(id_to_store);
    }, 100);
}

为什么React希望我们设置显式事件处理程序而不使用委托？委托效率不高吗？并不是的。一旦您不create new handler function for each element，它的开销就会很小。但是，作为显式绑定处理程序的优点，您不必担心内存泄漏，因为处理程序被委派给寿命很长的太常见的父元素。是唯一原因吗？不，设置的处理程序也更适合“虚拟DOM与真实DOM比较”。

因此，您可以使用委派，但最好不要使用它，直到出现真正的瓶颈。

反应事件处理程序，委托

1 个答案: