React 合成イベントの説明

React 合成イベントとは、js を使用して Dom イベント フローをシミュレートする React を指します。 (ファイバー ツリーは Dom ツリー構造をシミュレートします) 合成イベントのイベント フローがキャプチャされ、ファイバー ツリーにバブル化されます。

入力ボックスをクリックして開始します

入力ボックスをクリックすると、React はルートノード (注 1) で focus イベント (注 2) (注 3) をリッスンします。

ネイティブ イベントから対応する仮想 Dom を見つけるにはどうすればよいでしょうか?

この時点で、React が取得する唯一の情報はネイティブ イベント オブジェクト (nativeEvent) です。 ReactはnativeEventに対応するDom(eventTarget)を使ってDomツリーを遡り、eventTargetに最も近いreactが管理するDomノード(注4)(注5)を探し、対応するファイバーAを取得します。

次に、イベントプラグイン（注6）を介して、合成イベント（注7）Aを作成します。合成イベント A は、React によってシミュレートされたイベント フローのイベント ソースと見なされ、ファイバー A は、React によってイベント ターゲットと見なされます。

合成イベントストリーム?

ファイバー A から上方 (最上位ファイバー HostComponent まで) のすべてのホスト タイプ ファイバーを収集します。 次に、収集されたファイバーアレイは後ろから前（キャプチャ）へ、次に前から後ろ（バブル）へ移動されます。トラバーサルが実行されるたびに、現在のトラバーサル項目のファイバーノードにバインドされたフォーカスイベントが収集されます（注8）。その後 (イベント プラグインが完了した後、つまり合成イベントが生成された後)、foucs コールバックはコレクションの順序で実行されます。これは、React がイベント フローをシミュレートする方法です。

拡張機能

入力ボックスをクリックすると複数のイベントが発生します

フォーカスに加えて、クリックなどの他のイベントもトリガーされます。 React はルート ノードでさまざまな種類のイベントをリッスンします。イベントがリッスンされるたびに、イベントは 1 回ディスパッチされます。イベントの種類が複数ある場合は、複数回ディスパッチされます。 入力ボックスをクリックするとフォーカスがトリガーされ、連続してクリックされます。フォーカス イベントがディスパッチされると、クリック イベントがディスパッチされます。 イベントがディスパッチされるたびに、保留中の同期タスク キュー (flushSyncCallBackQueue) が処理されます。

予期しないレンダリングですか?

NoMode モードでは、イベントが複数回ディスパッチされ、各イベントによって状態が変更される場合 (setState の呼び出しなど)、対応するコンポーネントが複数回レンダリングされます。 この例では、入力ボックスをクリックし、フォーカス イベントとクリック イベントを入力にバインドし、イベント コールバックが setState を呼び出すと、入力が 2 回レンダリングされます。

値を設定した後、React の入力が制御されたコンポーネントになるのはなぜですか?

react では、input に value 属性が設定されている場合、入力ボックスに何が入力されても入力ボックスの値は変更されません。入力コンポーネントの状態を変更しない限り。シミュレートされたイベント ストリームを処理した後、React はメソッドを呼び出して予期しない効果をリセットします。 たとえば、このシナリオでは、入力に値を入力すると、入力ボックスには入力した値が表示されますが、入力値は対応するファイバーの value プロパティによってすぐに更新されます (finishEventHander は制御されたコンポーネントをリセットします)。 入力に値が設定されていない場合は無視されます。

合成イベント プロパティにアクセスできない場合があるのはなぜですか?

イベント フロー (バブリングをキャプチャ) が完了した後、React は合成イベント オブジェクトを解放します (SyntheticEvent.prototype.destructor は合成イベント オブジェクトのプロパティをリセットします)。

React はイベントのバブリング防止とデフォルトの動作をどのようにシミュレートしますか?

React はイベント フローの順序に従ってコールバックを実行します。実行前に、現在の合成イベント オブジェクトがバブリングを防ぐ状態にあるかどうかを確認します。そうである場合は、イベント フローを終了します。 React の合成イベント オブジェクト プロトタイプはネイティブ機能を強化します。ネイティブ イベント メソッドのバブリング防止とデフォルト動作防止がカプセル化されています (ネイティブ イベント メソッドも内部的に呼び出されます)。

注記

注1: ​​ルートノードは react-v16 ではドキュメント、 react-v17 ではマウントコンテナ Dom です。
注 2: focus イベントはバブリング イベントではなく、react はキャプチャ フェーズで非バブリング イベントをリッスンします。 注 3: ルート ノードは、submit、reset、invalid、media イベントなどの特別な例外を除き、すべてのイベントをリッスンします。 注 4: react がファイバー ツリーを Dom ツリーにマウントすると、各ホスト タイプのファイバー ノードは Dom ノードに 1 つずつ対応し、リンクされます。 注 5: 上方向の検索は、サードパーティのスクロール プラグインなど、子 Dom ノードが react で管理されていない場合があるためです。 注 6: Dom イベントをシミュレートするために、react は補足します 注 7: react 内のコンストラクタのインスタンス。合成イベントの一部のプロパティは nativeEvent から取得されます。合成イベントはファイバーに関連付けられます。注 8: 実行されるのではなく、収集されます。 Reactは特定のタイプのイベントをバッチ処理するため

以上がReact合成イベントの詳しい説明の内容です。React合成イベントについてさらに詳しく知りたい方は、123WORDPRESS.COMの他の関連記事もぜひご覧ください！