ソースコードと結びつけてreactイベントメカニズムの原理01-イベントメカニズムに対する初歩的な理解と検証を徹底的に理解する

前言

これはreactイベントメカニズムの第1編で、主な内容は:表象理解、検証、意義と思考がある.

表象理解

まずreactイベントメカニズムの基本的な理解を振り返ってみると、react自身はイベント登録、イベントの合成、イベントバブル、イベントの配布など、独自のイベントメカニズムを実現しており、オリジナルとは別のことであるが、ブラウザに基づくイベントメカニズムの下で完成している.
reactのすべてのイベントは、特定のdomノードにバインドされずにdocumentにバインドされ、統一されたイベントハンドラによって処理されることが知られています.ブラウザのイベントメカニズム(バブル)に基づいて、すべてのノードのイベントがdocumentで触発されます.
上はreact事件に対する基本的な認識に基づいているが、この認識は正しいのだろうか.簡単な方法で検証できます.

検証＃ケンショウ＃

検証内容:

すべてのイベントは、要素の最上位レベルのdocumentに登録されています.

ノードのイベントは、統合されたエントリ処理

によって処理する.
便宜上、cliを介して直接プロジェクトを作成します.
コードは次のとおりです.

componentDidMount(){ 

        document.getElementById('btn-reactandnative').addEventListener('click', (e) => {
            console.log('  +react   :         ');
        });

    }

    handleNativeAndReact = (e) => {
        console.log('  +react   :      react  ');
    }

    handleClick=(e)=>{
        console.log('button click');
    }
 render(){
        return 
react event!!!
react   

                   + react   
        
    }

コードには2つのbuttonに合成イベントがバインドされ、btn#btn-reactandnativeには単独でオリジナルのイベントがバインドされています.
次にchromeのコンソールを見て、要素の登録イベントを表示します.
簡単な検証により、すべてのイベントが異なるイベントタイプに応じてdocumentにバインドされていることがわかります.トリガ関数統合はdispatchEventです.

考えてみる

1つのノードに合成と原生イベントが同時にバインドされている場合、バブル後の実行関係を禁止するのはどのようなものですか?
実はここまで読んで答えはもうありました.私たちは今、現在の知識に基づいてこの関係を分析しています.
合成イベントのトリガはブラウザのイベントメカニズムに基づいて実現されるため、バブルメカニズムによって最上位要素にバブルし、dispatchEventによって統一的に処理される.
次は私が出した結論です.
原生イベントがバブルを阻止すると、合成イベントのトリガが阻止されるに違いない.
合成イベントのバブル防止は原生イベントに影響しない.
どうしてですか.ブラウザのイベントメカニズムを思い出す
ブラウザイベントの実行には、キャプチャフェーズ-ターゲット要素フェーズ-バブルフェーズの3つのフェーズが必要です.
ノード上のオリジナルイベントの実行はターゲットフェーズであるが、合成イベントの実行はバブルフェーズであるため、オリジナルイベントはまずイベントを合成して実行し、その後親ノードにバブルします.
原生が泡を止める以上、合成は何を実行するのか.
はい、合成の番で泡が出るのを止められましたが、原生は実行しますか?
もちろんできます.
オリジナルのイベントは合成の実行より先に行われるため,合成イベント内で阻止されるのは合成のイベントバブルだけである.(コードは貼らない)
結論を出しました
オリジナルイベント(バブルを阻止)は合成イベントの実行を阻止します
合成イベント(バブルを阻止)は、オリジナルイベントの実行を阻止しません.
両者を混合して使用しないほうがいいです.奇妙な問題を避けたほうがいいです.

意味

react自身がこんなに多くの意味をしているのは何ですか?
私の理解は
1.メモリ消費量を削減し、パフォーマンスを向上させ、そんなに多くのイベントを登録する必要はありません.1つのイベントタイプはdocumentに1回しか登録されていません.
2.規範を統一し、ieイベント互換問題を解決し、イベントロジックを簡略化する
3.開発者にやさしい

考える

reactが私たちにこんなに多くのことをしてくれた以上、彼の背後にあるメカニズムはどんなものですか.
イベントはどのように登録され、イベントはどのようにトリガーされ、バブルメカニズムはどのように実現されますか?
後続の文章を見てください.....
もっとすばらしい内容は私の公衆番号に注目することを歓迎します-先端の張大太り