2017-02-19 3 views
4

これは私の心の中で数日間続いています。リアクトの合成イベントシステムを理解する

ドキュメントごとに、Reactはsynthetic event systemであり、これはa cross-browser wrapper around the browser's native eventです。ドキュメントを読むと、カスタム(合成)イベントシステムは効率性ではなく、ブラウザ間の互換性であるということを正しく理解しています。

つまりReactは、親要素でのイベント委譲の効率的なアプローチではなく、イベントを要素に追加しますか?

私はまた、最初の好奇心を呼び起こしたFirefox Inspectorでこれに気付きました。

質問をする理由は、ユーザーが何千もの要素を画面上でドラッグする可能性があるので、最終的にイベントの委任が出るようなアプリケーションに取り組んでいるということです。

答えて

0

さてさて、あなたはおそらくすでに自分ですべてを考え出したが、私は自分自身に同じ質問をして、私は他の誰かが唯一が反応使用してもアイデアを得ていない好奇心である場合には、ここでこれを残すだろうと考え出し約どのように動作する

  • が反応するすべての仮想DOMについてです:

    だから、私はあなたの質問(特に「要素にイベントを追加する」の部分)が、約完全にはよく分かりません。名前が意味するように、の上にのDOM上に「実際の」環境が構築されています。したがって、はすべて、イベントハンドリングを含むその抽象化レイヤーで行われます。

  • イベントは、計算なので、DOMまたはネイティブ(使用している反応の味に依存する)

仮想DOMまでのイベントをもたらすために結果的に、あなたの最初の必要性、その「自然」環境で表示されますあなたの変更を仮想DOM内のコンポーネントの表現にディスパッチし、関連する変更を元に戻してDOMに適切に反映させます。

バーチャルDOMへの変更は、トップレベルの委任によって効果的に実行されます。つまり、React 自体はのすべてのイベントをdocumentレベルで受信します。これは、技術的には、すべてのイベントが1つのキャプチャ+バブリングループを通過する前に、反応固有コードを入力することも意味します。その最初のDOMトラバーサルに関連する時間を「失う」ため、パフォーマンスが賢明であることを示すことはできませんが、一方で、仮想DOMのすべての変更を行います実際のDOMでは...

最後に、SyntheticEventは実際にはブラウザ間の互換性の問題を減らすことを目的としたラッパーです。また、ガベージコレクション時間を短縮することで、プールを速くするプーリングも導入されています。さらに、1つのネイティブイベントで複数のSyntheticEventを生成できるため、簡単に新しいものを作成することができます(ネイティブtouchStart、ネイティブtouchEndを連続して受信した場合に放出される可能性のあるsyntheticTapイベントなど)。

私は詳細を投稿しましたhere。それは完全ではありませんが、それらはいくつかの不正確さかもしれませんが、おそらくトピックに関するいくつかの情報を与えることができます。

関連する問題