React の合成イベントを記述する方法

React 合成イベントは、React がネイティブ DOM イベントのすべての機能をシミュレートできるイベント オブジェクト、つまりブラウザ ネイティブ イベントのクロスブラウザ ラッパーです。W3C 仕様に従って合成イベントを定義し、互換性があります。すべてのブラウザに対応しており、ブラウザのネイティブ イベントと同じインターフェイスを備えています。 React では、すべてのイベントは合成イベントであり、ネイティブ DOM イベントではありませんが、DOM イベントは「e.nativeEvent」プロパティを通じて取得できます。

#このチュートリアルの動作環境: Windows7 システム、react18 バージョン、Dell G3 コンピューター。

#1. 合成イベントとは

React はブラウザーです。ベース イベント メカニズム自体は、イベント登録、イベント合成、イベント バブリング、イベント ディスパッチなどを含む一連のイベント メカニズムを実装します。

React では、この一連のイベント メカニズムは合成イベントと呼ばれます

SyntheticEvent

React SyntheticEvent は、ネイティブ DOM イベントのすべての機能、つまりブラウザーのネイティブ イベント デバイス ラッパーのクロスブラウジングを React がシミュレートするイベント オブジェクトです。 W3C 仕様に従って合成イベントを定義し、すべてのブラウザと互換性があり、ブラウザのネイティブ イベントと同じインターフェイスを備えています。たとえば、

const button = <button onClick={handleClick}>按钮</button>

React では、すべてのイベントは合成であり、ネイティブ DOM イベントではありませんが、DOM イベントは e.nativeEvent プロパティを通じて取得できます。例:

const handleClick = (e) => console.log(e.nativeEvent);;
const button = <button>按钮</button>

上記からわかるように、React イベントとネイティブ イベントは非常に似ていますが、いくつかの違いもあります:

• イベント名の命名メソッドが異なります

// 原生事件绑定方式
<button onclick="handleClick()">按钮命名</button>
      
// React 合成事件绑定方式
const button = <button onClick={handleClick}>按钮命名</button>

• イベント ハンドラー関数の書き方が異なります

// 原生事件 事件处理函数写法
<button onclick="handleClick()">按钮命名</button>
      
// React 合成事件 事件处理函数写法
const button = <button onClick={handleClick}>按钮命名</button>

onclick はDOM 要素では、実際にはイベント プロキシ関数を実際のノードに直接バインドするのではなく、すべてのイベントを構造の最外層にバインドし、統一されたイベントを使用してリッスンします。 [関連する推奨事項: Redis ビデオ チュートリアル 、プログラミング チュートリアル ]

このイベント リスナーは、すべてのコンポーネント内のイベント リスニングおよび処理関数を保存するためのマッピングを維持します。コンポーネントがマウントまたはマウント解除されるときは、この統合イベント リスナー上でいくつかのオブジェクトを挿入または削除するだけです。

イベントが発生すると、まずこの統合イベント リスナーによって処理され、次に実際のイベント処理関数がマッピング内で検出されて呼び出されます。これにより、イベントの処理とリサイクルのメカニズムが簡素化され、効率が大幅に向上します。

2. 実行シーケンス

React 合成イベントとネイティブ イベントの実行シーケンスについては、次の例を参照してください:

import  React  from 'react';
class App extends React.Component{

  constructor(props) {
    super(props);
    this.parentRef = React.createRef();
    this.childRef = React.createRef();
  }
  componentDidMount() {
    console.log("React componentDidMount！");
    this.parentRef.current?.addEventListener("click", () => {
      console.log("原生事件：父元素 DOM 事件监听！");
    });
    this.childRef.current?.addEventListener("click", () => {
      console.log("原生事件：子元素 DOM 事件监听！");
    });
    document.addEventListener("click", (e) => {
      console.log("原生事件：document DOM 事件监听！");
    });
  }
  parentClickFun = () => {
    console.log("React 事件：父元素事件监听！");
  };
  childClickFun = () => {
    console.log("React 事件：子元素事件监听！");
  };
  render() {
    return (
      <div ref={this.parentRef} onClick={this.parentClickFun}>
        <div ref={this.childRef} onClick={this.childClickFun}>
          分析事件执行顺序
        </div>
      </div>
    );
  }
}
export default App;

出力シーケンスは次のとおりです:

原生事件：子元素 DOM 事件监听！ 
原生事件：父元素 DOM 事件监听！ 
React 事件：子元素事件监听！ 
React 事件：父元素事件监听！ 
原生事件：document DOM 事件监听！

次の結論を導き出すことができます:

• すべてのイベントがドキュメント オブジェクトにマウントされることに反応します

• 実際の DOM 要素がイベントをトリガーすると、ドキュメント オブジェクトにバブルアップして React イベントを処理します

• したがって、ネイティブ イベントが最初に実行され、次にネイティブ イベントが実行されます。 React イベント

• 最後にドキュメントにマウントされたイベントを実際に実行します

##対応するプロセスは図に示すとおりです:

そのため、異なる時間をブロックしたいと考えています。セグメントのバブリング動作では、次のようにさまざまな方法が使用されます。

• 合成イベント間のバブリングを防ぐには、 e.stopPropagation() を使用します。

• 合成イベントと最も外側のドキュメント上のイベントのバブリングを防ぐには、e.nativeEvent.stopImmediatePropagation()

# を使用します。 ## 一番外側のドキュメント以外での合成イベントのバブリングを防止します。ネイティブ イベントでのバブリングは、e.target

• document.body.addEventListener('click', e => {   
      if (e.target && e.target.matches('div.code')) {  
          return;    
      }    
      this.setState({   active: false,    });   }); 
  }

3 を判断することで回避できます。

##React イベント メカニズムは次のように要約されます。

React に登録されたイベントは、最終的には React コンポーネントに対応する DOM ではなく、ドキュメントの DOM にバインドされます。 (すべてのイベントがドキュメントにバインドされ、他のノードにはバインドされたイベントがないため、メモリ オーバーヘッドが削減されます)

• React 自体は一連のイベント バブリング メカニズムを実装しているため、event.stopPropagation が使用されます。 （） 無効です。

• React は、トリガーされたコンポーネントからキューを通じて親コンポーネントまでトレースバックし、JSX

• React で定義されたコールバックを呼び出します。セット 独自の合成イベント SyntheticEvent

• (学習ビデオ共有:

  基本プログラミング ビデオ
)

以上がReact の合成イベントを記述する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。