反応イベントとネイティブイベントの違いは何ですか?

反応イベントとネイティブ イベントの違いは、反応イベントはドキュメントにバインドされるのに対し、ネイティブ イベントは dom にバインドされることです。バインディングに関しては、DOM 上のイベントがドキュメント上のイベントよりも優先されます。react のイベント オブジェクトはネイティブ オブジェクトではなく合成オブジェクトです。

このチュートリアルの動作環境: Windows 10 システム、react17.0.1 バージョン、Dell G3 コンピューター。

反応イベントとネイティブ イベントの違いは何ですか?

反応イベントはドキュメントにバインドされ、

ネイティブ イベントは dom にバインドされます。

したがって、結合場所に関しては、DOM 上のイベントがドキュメント上のイベントよりも優先されます。

まず第一に、JS はいくつかの動的な操作を実装することになっており、ユーザーはフォームの送信やマウスクリックなどの機能を実装したい場合があるため、ブラウザーでこのイベントをトリガーする必要があります。 、その後、ブラウザはユーザーの行動を感知 (またはキャプチャ) し、イベントに応答します。これをイベントと呼びます。

イベント オブジェクトとは何ですか?

システムはハンドラーを呼び出すと、イベントに関するすべての情報をオブジェクトにカプセル化し、それをパラメーターとしてイベント ハンドラーに渡します。このオブジェクトがイベント オブジェクトです。ネイティブ関数ではイベントがよく見られますが、これはイベント オブジェクトと呼ばれるものです。

react には、イベント処理において次の利点があります:

パフォーマンスの最適化を達成するために、ほぼすべてのイベントがドキュメントに委任されます。

##イベントの種類ごとに、ディスパッチ関数 (dispatchEven) を使用してイベントが均一に配信されます。

• ##イベント オブジェクト (event) は合成オブジェクト (SyntheticEvent) です。 )、ネイティブではありません
React 合成イベント
なぜ合成イベントに抽象化されるのですか?

すべてのイベント処理関数が DOM にバインドされている場合、ページが応答するときに影響を受け、ページが非常に遅くなります。このような DOM イベントの悪用を回避し、最下層でのさまざまなブラウザ イベント間のシステムの違いを保護するために、React は中間層 -SyntheticEvent

Principle

を実装します。 React では、イベントをバインドする必要がある場合、通常は次のように JSX で記述します:

<div onClick={this.onClick}>我是react点击事件</div>

しかし、React では、クリック イベントは実際には div の DOM にバインドされるのではなく、DOM にバインドされます。 div の DOCUMENT に設定すると、イベントが発生してドキュメントにバブルすると、反応はイベントの内容を対応する関数に渡して処理します。

反応ネイティブ イベントでの使用方法

react はほぼすべてのネイティブ イベントをカプセル化しますが、たとえば:

モーダルを開いた後、他の空白領域をクリックするとモーダルを閉じる必要があります

いくつかのサードパーティのイベントの紹介ネイティブ イベントを実装するライブラリ、およびライブラリが相互に対話する必要がある場合、

および他のシナリオでは、ビジネス ロジック処理にネイティブ イベントを使用する必要があります。

ネイティブ イベントは実際の DOM にバインドする必要があるため、通常、componentdidmout/ref 関数の実行フェーズ中にバインドされます。

class Demo extends Domponent {
    componentDidMount () {
        const parentDom = ReactDom.findDOMNode(this)
        const childDom = parentDom.queneSelector('.button');
        childDom.addEventListen('click',this.onDomClick, false)
    }
    
    onDOMClick = (e) => {
        
    }
    render () {
        return <div>demo</div>
    }
}

ネイティブ イベントと合成イベントの混合使用

ビジネス シナリオでネイティブ イベントと合成イベントを混合する必要がある場合は、使用中に支払いを行う必要があります。次の点に注意してください:

応答のシーケンス

class Demo extends Domponent {
    componentDidMount () {
        const parentDom = ReactDom.findDOMNode(this)
        const childDom = parentDom.queneSelector('.button');
        childDom.addEventListen('click',this.onDomClick, false)
    }
    
    onDOMClick = (e) => {
        console.log('dom event!')
    }
    onReactClick = (e) => {
        console.log('react event!')
    }   
    render () {
        return <div onClick={this.onReactClick}>demo</div>
    }
}

結果出力:

dom event! react event!

原因分析: まず第一に、ネイティブ イベントが DOM にバインドされていることを知っています。および合成イベント これはドキュメントにバインドされているため、DOM 上のイベントが最初にバブルアップすると、そのイベントが最初に実行され、合成イベントが実行される前にドキュメントにバブルアップします。 「

反応ビデオチュートリアル

>>

以上が反応イベントとネイティブイベントの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。