React の合成イベントを記述する方法-フロントエンドQ&A-php.cn

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

青灯夜游

リリース： 2022-12-15 19:39:29

オリジナル

2293 人が閲覧しました

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

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

#このチュートリアルの動作環境: 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 onClick={handleClick}>按钮</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 &#39;react&#39;;
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 イベント
最後にドキュメントにマウントされたイベントを実際に実行します

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

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

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

合成イベント間のバブリングを防ぐには、 e.stopPropagation() を使用します。
合成イベントと最も外側のドキュメント上のイベントのバブリングを防ぐには、e.nativeEvent.stopImmediatePropagation()
```
document.body.addEventListener(&#39;click&#39;, e => {   
    if (e.target && e.target.matches(&#39;div.code&#39;)) {  
        return;    
    }    
    this.setState({   active: false,    });   }); 
}
```
ログイン後にコピー
3 を判断することで回避できます。
##React イベントメカニズムは次のように要約されます。

React に登録されたイベントは、最終的には React コンポーネントに対応する DOM ではなく、ドキュメントの DOM にバインドされます。 (すべてのイベントがドキュメントにバインドされ、他のノードにはバインドされたイベントがないため、メモリオーバーヘッドが削減されます)
- React 自体は一連のイベントバブリングメカニズムを実装しているため、event.stopPropagation が使用されます。（）無効です。
- React は、トリガーされたコンポーネントからキューを通じて親コンポーネントまでトレースバックし、JSX
- React で定義されたコールバックを呼び出します。セット独自の合成イベント SyntheticEvent
- (学習ビデオ共有:
  基本プログラミングビデオ
以上がReact の合成イベントを記述する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。