Implémentation de l'inscription aux événements React Event

Cet article vous présente la mise en œuvre de l'enregistrement des événements React Event. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

La gestion des événements des éléments React est très similaire à celle des éléments DOM. Mais il y a une petite différence grammaticale :

• Les propriétés de liaison d'événement React sont nommées en casse chameau au lieu de minuscules.

• Si vous utilisez la syntaxe JSX, vous devez transmettre une fonction en tant que gestionnaire d'événements au lieu d'une chaîne (la façon dont les éléments DOM sont écrits)

Et React lui-même implémente un événement synthétique en interne Lorsque vous utilisez React, vous n'avez généralement pas besoin d'utiliser addEventListener pour ajouter un écouteur à un élément DOM créé. Vous devez uniquement fournir un écouteur lorsque l'élément est initialement rendu.

Voyons comment cela est implémenté

Le mécanisme d'événement React est divisé en deux parties : inscription à l'événement et distribution des événements

Inscription à l'événement

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

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

Dans le code ci-dessus, onClick est passé dans un handleClick en tant qu'accessoires Lorsque le composant est mis à jour et monté, les accessoires seront traités comme suit :

Code principal :

Lorsque

ReactDOMComponent.js
charge des composants (mountComponent) et met à jour (updateComponent), appelez la méthode pour traiter les accessoires : _updateDOMPropertiesReactDOMComponent.js

Regardez la méthode de liaison

_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

écouter

Go to Enfin, il s'agit en fait de doc.addEventLister(event, callback, false);

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

On peut voir que tous les événements sont liés au document

Les événements sont donc déclenchés par la méthode dispatchEvent de ReactEventListener

stockage d'événements de rappel

listenerBank

react maintient une variable ListenerBank pour stocker les rappels de tous les événements liés.

Retour à la méthode précédente d'enregistrement des événements

Une fois la liaison terminée, putListener sera exécuté.

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

EventPluginHub n'est instancié qu'une seule fois par React. En d’autres termes, les rappels pour tous les événements du groupe de projet seront stockés dans l’unique ListenerBank.

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

Recommandations associées :

Utilisation de React : gestion de l'état à l'intérieur des composants React

Utilisation de React : Cinq fonctionnalités majeures du framework React

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!