Question

我有这样的代码：

function ManyNodes() {
  const nums = new Array(1e5).fill(0).map(_ => Math.floor(Math.random()*1e8));
  return (
  <ul>{nums.map(n => <li key={n} onClick={e=>console.log(n)}>{n}</li>)}</ul>
  )
}

render(<ManyNodes />, document.querySelector('#app'))

然后它应该是文档中的1e5 li，并且每个li都有自己的点击侦听器。因此页面上应该有超过1e5个侦听器。

但我使用Chrome Web Developer Tool，在Performance标签中，您只能看到数百个听众。那很奇怪。

如何处理这个？

Answer 1

TL; DR 事件委派和事件池

活动委派

将事件侦听器附加到DOM节点非常缓慢内存消耗。相反，React实现了一种流行的技术 “事件代表团”。

什么是事件委派？

单个事件侦听器附加到文档的根目录。什么时候一个事件被触发，浏览器为我们提供了目标DOM节点[...]

对于您的信息， Vjeux 是前端团队的一名Facebook软件工程师，负责React Native。

http://blog.vjeux.com/2013/javascript/react-performance.html（查看事件委派部分）

事件合并

汇集SyntheticEvent。这意味着SyntheticEvent 对象将被重用，所有属性将在之后无效已调用事件回调。这是出于性能原因。如这样，你就无法以异步方式访问事件。

https://facebook.github.io/react/docs/events.html

为什么Chrome显示听众数量小于实际数量？

1 个答案: