Reactイベントのいくつかのtips

翻訳のまとめhttps://fortes.com/2018/react-and-dom-events/
reactアプリケーションではReactのイベントをできるだけ使用すべきであることを知っています.これにより、より効率的なパフォーマンスが得られ、メモリの漏洩が容易ではないなどの利点があります.しかし、原生のイベントを使用しなければならない場合があります.dropdown、portal、popopoverなど、documentのいずれかをクリックしてコンポーネントのsetStateをトリガーして消去したい場合があります.しかし、原生イベントとreactイベントを同時に使用すると、emmmmmは、予想外の結果を得る可能性があります.それは原生イベントとreactイベントに対して何か誤解があるかもしれません.少なくとも私にとってはそうです(気まずいです).
まず、React element上でバインドするイベントは、対応するdomノード上で原生イベントをバインドするものではなく、Reactイベントの実現メカニズムは、原生イベントがdocument上にバブルし、document上でイベントを傍受することによって実現されることを知る.イベントがdocumentに泡を立てると、Reactは自分のSyntheticEventを配布して泡をシミュレートし、React component tree全体を通過する.SyntheticEventはスマートです.例えば、createPortalというAPIを使って、コンポーネント内のサブコンポーネントをbodyの下に掛けて、このサブコンポーネントをクリックします.このサブコンポーネントdomノードは親コンポーネントの中にいないので、オリジナルイベントは親コンポーネントを通過しませんが、SyntheticEventはrender treeに基づいて泡が立ちます.つまり、親コンポーネントを通過します.
以上の原理に基づいて、私たちは以下の黒い操作をすることができます.

Reactのイベント伝播を遮断することができます.documentに浸かる前にstopPropagationを通過すればReactイベントのトリガを阻止できる.

// body document， body ，App Button React document.body.addEventListener('click', e => e.stopPropagation())

オリジナルイベントのhandlerとreactイベントhandlerの実行順序を制御したい場合、例えばReactイベントのhandlerを先に実行したい場合は、オリジナルイベントのリスニングはdocumentまたはwindowにバインドする必要があります(バブル順序).documentにバインドする場合は、React Component mountedの後にバインドされていることを確認してください.

原生イベントの伝播は、捕捉、位置決め、発泡の3つの段階を経験する.スナップフェーズでstopPropagation()を使用してイベントの伝播を阻止すると、イベントはバブルを経験しません.この場合、Reactはイベントを感知しません.次の

を参照してください.// ref // ： onAppClick onButtonClick this.app.addEventListener('click', e => e.stopPropagation(), true)
ここにはもっと細かいdemoがあります.https://jsfiddle.net/fortesdotcom/n5u2wwjg/37487/ああ、予想通りかどうか見てみましょう.