给React数据网格数千单元格逐个绑定点击/按键监听是否存在性能问题？

React的底层事件处理逻辑 #

React从设计之初就采用了事件委托机制，你在组件里给每个单元格写onClick，并不会真的给每个<td> DOM元素绑定独立的事件监听器：

• React会在应用根节点（比如页面的#root容器）统一挂载全局事件处理函数；
• 你定义的单元格点击回调，会被React存入内部的事件映射表中；
• 当真实点击事件冒泡到根节点时，React会根据事件目标元素，在映射表里找到对应的回调并执行。
  简单来说，你看到的“每个单元格都有监听”只是React的语法糖，底层其实只有寥寥几个全局监听器，完全不会出现早年那种数百个监听器拖慢页面的情况。

现代浏览器的原生优化 #

就算不用React，现在的浏览器也早已不是当年的状态：

• 浏览器内核对事件监听器的内存管理、执行调度做了大量优化，几百个普通点击监听器对现代浏览器来说，性能开销几乎可以忽略；
• 当然事件委托依然是减少内存占用的最佳实践，但在React场景下，框架已经替你完成了这件事，无需手动绑定到<tbody>上。

结论 #

你现在的写法完全没问题，不会有性能隐患：
一是React的事件委托机制帮你规避了大量DOM监听器的创建；二是现代浏览器本身的性能提升，也让原生场景下的监听器开销变得不再敏感。

内容的提问来源于stack exchange，提问作者Constantine