上級レベル: React でのイベントの処理

上級開発者として、React でのイベント処理を深く理解していることが期待されます。これには、基本を理解するだけでなく、効率的で保守可能でスケーラブルなアプリケーションを作成するための高度なテクニックを習得することも含まれます。この記事では、イベント ハンドラーの追加、合成イベントの理解、イベント ハンドラーへの引数の受け渡し、カスタム イベントの作成、イベント委任の活用など、React でのイベント処理の複雑さについて説明します。

イベント処理

JSX でのイベント ハンドラーの追加

JSX でのイベント ハンドラーの追加は簡単で、通常の HTML でのイベントの処理に似ていますが、React の独自のアーキテクチャによる重要な違いがいくつかあります。

イベントハンドラーの追加例:

この例では、ボタンがクリックされるたびに handleClick 関数が呼び出されます。 JSX の onClick 属性は、イベント ハンドラーを指定するために使用されます。

合成イベント

React は合成イベントと呼ばれるシステムを使用してイベントを処理します。合成イベントは、ブラウザーのネイティブ イベント システムのクロスブラウザー ラッパーです。これにより、イベントが異なるブラウザ間で一貫して動作することが保証され、統一された API が提供されます。

合成イベントの例:

この例では、handleInputChange 関数は、入力フィールドが変更されるたびにその値をログに記録します。イベント パラメーターは、すべてのブラウザーにわたって一貫したイベント プロパティを提供する合成イベントです。

イベントハンドラーに引数を渡す

イベント ハンドラーへの引数の受け渡しは、アロー関数またはバインド メソッドを使用して行うことができます。これは、より柔軟な方法でイベントを処理するために重要です。

アロー関数の使用例:

バインドメソッドを使用した例:

どちらのメソッドでも、追加の引数を handleClick 関数に渡すことができるため、イベント処理が柔軟になります。

カスタムイベント処理

カスタムイベントの作成

標準イベントではカバーされないより複雑なインタラクションには、React でのカスタム イベントの作成が必要です。カスタム イベントは、CustomEvent コンストラクターとdispatchEvent メソッドを使用して作成およびディスパッチできます。

カスタム イベントの作成とディスパッチの例:

この例では、customEvent という名前のカスタム イベントが作成され、ボタンがクリックされたときに送出されます。イベント ハンドラーはカスタム イベントをリッスンし、イベントの詳細メッセージをログに記録します。

React でのイベント委任

イベント委任は、単一のイベント リスナーを使用して複数の要素のイベントを管理する手法です。これは、リストやテーブルでイベントを効率的に管理する場合に特に便利です。

イベント委任の例:

この例では、div 要素の単一のイベント ハンドラーがすべてのボタンのクリック イベントを管理します。イベント ハンドラーは、event.target をチェックしてどのボタンがクリックされたかを判断し、それに応じてメッセージをログに記録します。

1. JSX でのインライン関数の作成を避ける: render メソッド内で新しい関数を作成すると、不必要な再レンダリングやパフォーマンスの問題が発生する可能性があります。代わりに、イベント ハンドラーをクラス メソッドとして定義するか、フックを使用します。
リーリー

1. デフォルトの動作を防止し、伝播を停止する: デフォルトの動作を防止するには、event.preventDefault() を使用し、必要に応じてイベントの伝播を停止するには、event.stopPropagation() を使用します。
リーリー

1. イベント リスナーのクリーンアップ: イベント リスナーを DOM 要素に直接追加する場合は、メモリ リークを避けるために必ずクリーンアップしてください。
リーリー

1. 高周波イベントのデバウンスまたはスロットル: スクロールやサイズ変更などの高周波イベントに対してデバウンスまたはスロットル手法を使用して、パフォーマンスを向上させます。
リーリー

1. イベント委任を賢く使用する: アイテムのリストなど、DOM に動的に追加または削除される要素に対してイベント委任を活用します。
リーリー

以上が上級レベル: React でのイベントの処理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。