React Eventイベント登録の実装

この記事では React Event イベント登録の実装について紹介します。必要な友人は参考にしてください。

React 要素のイベント処理は、DOM 要素のイベント処理と非常に似ています。ただし、文法的に少し違いがあります。

• React イベント バインディング プロパティの名前は、小文字ではなくキャメルケースで付けられます。

• JSX 構文を使用する場合は、文字列 (DOM 要素の記述方法) ではなく、関数をイベント ハンドラーとして渡す必要があります

そして、React を使用する場合、React 自体が内部で合成イベントを実装します。 、通常は、既に作成された DOM 要素にリスナーを追加するために addEventListener を使用する必要はありません。要素が最初にレンダリングされるときにのみ、リスナーを提供する必要があります。

これがどのように実装されているかを見てみましょう

React イベントメカニズムは、イベント登録とイベント配布の 2 つの部分に分かれています

イベント登録

// 事件绑定
function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
}

  return (
    <a>
      Click me
    </a>
  );

上記のコードでは、onClick がprops handleClick は、コンポーネントが更新されてマウントされるときに、props を処理します。プロセスは次のとおりです:

コアコード:
ReactDOMComponent.js がロード (mountComponent) および更新 (updateComponent) しているときに、 を呼び出します。 props を処理するメソッド:_updateDOMProperties

ReactDOMComponent.js

_updateDOMProperties: function(lastProps, nextProps, transaction) {
...
if (registrationNameModules.hasOwnProperty(propKey)) {
        if (nextProp) {
          // 如果传入的是事件，去注册事件
          enqueuePutListener(this, propKey, nextProp, transaction);
        } else if (lastProp) {
          deleteListener(this, propKey);
        }
      } 
...
}

// 注册事件
function enqueuePutListener(inst, registrationName, listener, transaction) {
  var containerInfo = inst._nativeContainerInfo;
  var doc = containerInfo._ownerDocument;
    ...
    // 去doc上注册
  listenTo(registrationName, doc);
    // 事务结束之后 putListener
  transaction.getReactMountReady().enqueue(putListener, {
    inst: inst,
    registrationName: registrationName,
    listener: listener,
  });
}

バインディングメソッドを見てください

ReactBrowserEventEmitter.js

listento

//registrationName:需要绑定的事件
//当前component所属的document，即事件需要绑定的位置
listenTo: function (registrationName, contentDocumentHandle) {
    var mountAt = contentDocumentHandle;
    //获取当前document上已经绑定的事件
    var isListening = getListeningForDocument(mountAt);
    ...
      if (...) {
      //冒泡处理  
      ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(...);
      } else if (...) {
        //捕捉处理
        ReactBrowserEventEmitter.ReactEventListener.trapCapturedEvent(...);
      }
      ...
  },

最後に、実際には doc.addEventLister(event, callback, false);

あなたすべてのイベントがドキュメントにバインドされていることがわかります

したがって、トリガーされるイベントは ReactEventListener のdispatchEventメソッドです

コールバックイベントストレージ

listenerBank

reactは、バインドされたすべてのイベントのコールバックを保存するためのlistenerBank変数を維持します。

イベントを登録する前の方法に戻ります

function enqueuePutListener(inst, registrationName, listener, transaction) {
  var containerInfo = inst._nativeContainerInfo;
  var doc = containerInfo._ownerDocument;
  if (!doc) {
    // Server rendering.
    return;
  }
  listenTo(registrationName, doc);
  transaction.getReactMountReady().enqueue(putListener, {
    inst: inst,
    registrationName: registrationName,
    listener: listener,
  });
}

putListenerはバインドが完了した後に実行されます。

var listenerBank = {};
var getDictionaryKey = function (inst) {
//inst为组建的实例化对象
//_rootNodeID为组件的唯一标识
  return '.' + inst._rootNodeID;
}
var EventPluginHub = {
//inst为组建的实例化对象
//registrationName为事件名称
//listner为我们写的回调函数，也就是列子中的this.autoFocus
  putListener: function (inst, registrationName, listener) {
    ...
    var key = getDictionaryKey(inst);
    var bankForRegistrationName = listenerBank[registrationName] || (listenerBank[registrationName] = {});
    bankForRegistrationName[key] = listener;
    ...
  }
}

EventPluginHub は React ごとに 1 回だけインスタンス化されます。つまり、プロジェクト グループ内のすべてのイベントのコールバックは、一意のlistenerBankに保存されます。

関連する推奨事項:

React の使用法: React コンポーネント内の状態管理

React の使用法: React フレームワークの 5 つの主要な機能

以上がReact Eventイベント登録の実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。