为React数据网格中的每个单元添加一个click/keydown侦听器是否存在性能问题?



早在React出现前几年,我就学会了将事件连接到表,方法是将侦听器附加到<tbody>,并从事件目标读取事件的真实源。通过这种方式,我们为整个表提供了一个侦听器,而不是可能的数百个。我曾经做过一个测试,如果使用后者,页面加载速度应该会慢得多。

快进到今天。我已经为我公司的平台编写了一个React数据网格。虽然表是虚拟化的,但它仍然可以同时拥有数百个单元格。将一键式侦听器放在表主体上会使一些事情变得复杂,如果每个单元格都拥有侦听器,那么这些事情对每个单元格来说都很简单。在测试中,到目前为止,我认为这样做没有任何性能问题。有人知道React是否有某种方法在幕后处理这个吗?现在如果没有React,它就不再是一个问题了吗?

康拉德的回答正是我所需要的。我的问题的答案是,我只认为我正在向每个单元格添加侦听器,至少在JSX中是这样做的。实际上,React只将几个侦听器附加到React根节点。事件委托完成其余的工作。与此类问题相关的研究主题是React Event Delegation。(我甚至无法用问题的形式表达我的担忧。)

请参阅这篇文章和这篇文章,以及Konrad引用的那篇文章,以及这个GitHub主题以获取更多信息。

最新更新