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

_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,
  });
}

ログイン後にコピー

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

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

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

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,
  });
}

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;
    ...
  }
}

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

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

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