Fatal编程技术网
  • javascript/
  • Javascript 为什么Chrome显示的侦听器数量小于实际数量？

Javascript 为什么Chrome显示的侦听器数量小于实际数量？

javascript html google-chrome reactjs

Javascript 为什么Chrome显示的侦听器数量小于实际数量？,javascript,html,google-chrome,reactjs,listener,Javascript,Html,Google Chrome,Reactjs,Listener,我有这样的代码： 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(<

我有这样的代码：

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'))

函数多节点（）{
const nums=新数组（1e5）.fill（0）.map（=>Math.floor（Math.random（）*1e8））；
返回(

    {nums.map（n=>
  • console.log（n）}>{n}
    • ）}

)
}
render（，document.querySelector（'#app'））
然后它应该在文档中1e5
li
，每个
li
都有自己的单击侦听器。因此，页面上应该有超过1e5个侦听器

但我使用的是ChromeWebDeveloper工具，在它的
性能
选项卡中，你只能看到数百个监听器。真奇怪

react如何处理这个问题？
TL；灾难恢复事件委派和事件池

活动委派

将事件侦听器附加到DOM节点的速度非常慢，而且
内存消耗。相反，React实现了一种称为
“活动代表团”

什么是活动授权

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

请注意，Vjeux是前端团队中的Facebook软件工程师，负责React Native

（查看事件委派部分）

事件池

该事件是合并的。这意味着该事件
对象将被重用，并且在
已调用事件回调。这是出于性能原因。作为
这样，您就不能以异步方式访问事件