反应事件处理程序，委托

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个不同的问题。

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

2. 为什么显示警告？ 这是因为事件对象实际上已被重用，所以如果您的处理程序以类似的方式与事件一起使用，

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

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

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

3. 为什么React期望我们设置显式事件处理程序而不是使用委托？ 委托效率不高吗？ 并不是的。 一旦您没有为每个元素创建新的处理函数，它的开销就会非常小。 但是，作为显式绑定处理程序的优点，您不必担心内存泄漏，因为处理程序被委派给寿命足够长的太常见的父元素 。 是唯一原因吗？ 不，设置的处理程序也更适合“虚拟DOM与真实DOM比较”。

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