なぜChromeはリスナーの数が実際の数よりも少ないことを示していますか？

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

そして、それが文書でliを1E5する必要があり、すべてのliは独自のクリックリスナーがあります。ページには1〜5人以上のリスナーがいるはずです。

しかし、私はChrome Web Developer Toolを使用していますが、そのPerformanceタブには何百ものリスナーが表示されています。それは奇妙だ。

どのように反応しますか？

Answer 1

TL、DOMノードにイベントリスナーを取り付けDRイベント委任およびイベントプーリング

イベント委任

はかなり遅いと メモリを消費します。代わりに、Reactは、 「イベント委任」と呼ばれる一般的な手法を実装しています。

イベント委任とは何ですか？

単一のイベントリスナーがドキュメントのルートに添付されています。 イベントが発生した場合、ブラウザは、私たちの目標DOMノードを与える[...]

あなたのための情報、Vjeuxが反応ネイティブに取り組んでフロントエンドチームのFacebookのソフトウェア・エンジニアです。

http://blog.vjeux.com/2013/javascript/react-performance.html（イベント委任セクションを確認）SyntheticEventがプールされ

をプール

イベント。これは、SyntheticEvent オブジェクトが再利用され、 イベントコールバックが呼び出された後にすべてのプロパティが無効になることを意味します。これはパフォーマンス上の理由によるものです。 のように、イベントに非同期でアクセスすることはできません。

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