Comment décrire les événements synthétiques de React

L'événement synthétique React est un objet d'événement qui simule toutes les capacités des événements DOM natifs dans React, c'est-à-dire un wrapper multi-navigateur pour les événements natifs du navigateur, il définit les événements synthétiques selon les spécifications du W3C, est compatible avec tous les navigateurs ; a les mêmes capacités que les événements natifs du navigateur. Même interface. Dans React, tous les événements sont des événements DOM synthétiques et non natifs, mais les événements DOM peuvent être obtenus via la propriété « e.nativeEvent ».

L'environnement d'exploitation de ce tutoriel : système Windows 7, version React18, ordinateur Dell G3.

1. Qu'est-ce qu'un événement synthétique

Le mécanisme d'événements basé sur un navigateur de React lui-même implémente un ensemble de mécanismes d'événements, notamment l'enregistrement d'événements, la synthèse d'événements, le bouillonnement d'événements, la répartition d'événements, etc.

Cet ensemble de mécanismes d'événements dans React est appelé événements synthétiques

SyntheticEvent

L'événement synthétique React (SyntheticEvent) est un objet d'événement qui simule toutes les capacités des événements DOM natifs dans React, c'est-à-dire le Cross- natif du navigateur. wrapper de navigateur pour les événements. Il définit des événements synthétiques selon la spécification W3C, est compatible avec tous les navigateurs et possède la même interface que les événements natifs des navigateurs. Par exemple

const button = <button onClick={handleClick}>按钮</button>

Dans React, tous les événements sont des événements DOM synthétiques et non natifs, mais les événements DOM peuvent être obtenus via la propriété e.nativeEvent. Par exemple :

const handleClick = (e) => console.log(e.nativeEvent);;
const button = <button onClick={handleClick}>按钮</button>

Vous pouvez voir ci-dessus que les événements React et les événements natifs sont très similaires, mais il existe certaines différences :

• Les noms d'événements sont nommés différemment

// 原生事件绑定方式
<button onclick="handleClick()">按钮命名</button>
      
// React 合成事件绑定方式
const button = <button onClick={handleClick}>按钮命名</button>

• La fonction de gestionnaire d'événements est écrit différemment

// 原生事件 事件处理函数写法
<button onclick="handleClick()">按钮命名</button>
      
// React 合成事件 事件处理函数写法
const button = <button onClick={handleClick}>按钮命名</button>

Bien que onclick semble être lié à l'élément DOM, il ne lie en fait pas la fonction proxy d'événement directement au nœud réel. Au lieu de cela, il lie tous les événements à la couche la plus externe de la structure, en utilisant une structure unifiée. Événements à surveiller. [Recommandations associées :

Tutoriel vidéo Redis, Tutoriel de programmation]

Cet écouteur d'événements maintient un mappage pour enregistrer les fonctions d'écoute et de traitement des événements à l'intérieur de tous les composants. Lorsqu'un composant est monté ou démonté, insérez ou supprimez simplement certains objets sur cet écouteur d'événements unifié.

Lorsqu'un événement se produit, il est d'abord traité par cet écouteur d'événements unifié, puis la véritable fonction de gestion des événements est trouvée dans le mappage et appelée. Cela simplifie le mécanisme de traitement et de recyclage des événements et améliore considérablement l’efficacité.

2. Ordre d'exécution

Concernant l'ordre d'exécution des événements synthétiques React et des événements natifs, vous pouvez jeter un œil à l'exemple suivant :

import  React  from 'react';
class App extends React.Component{

  constructor(props) {
    super(props);
    this.parentRef = React.createRef();
    this.childRef = React.createRef();
  }
  componentDidMount() {
    console.log("React componentDidMount！");
    this.parentRef.current?.addEventListener("click", () => {
      console.log("原生事件：父元素 DOM 事件监听！");
    });
    this.childRef.current?.addEventListener("click", () => {
      console.log("原生事件：子元素 DOM 事件监听！");
    });
    document.addEventListener("click", (e) => {
      console.log("原生事件：document DOM 事件监听！");
    });
  }
  parentClickFun = () => {
    console.log("React 事件：父元素事件监听！");
  };
  childClickFun = () => {
    console.log("React 事件：子元素事件监听！");
  };
  render() {
    return (
      <div ref={this.parentRef} onClick={this.parentClickFun}>
        <div ref={this.childRef} onClick={this.childClickFun}>
          分析事件执行顺序
        </div>
      </div>
    );
  }
}
export default App;

L'ordre de sortie est :

原生事件：子元素 DOM 事件监听！ 
原生事件：父元素 DOM 事件监听！ 
React 事件：子元素事件监听！ 
React 事件：父元素事件监听！ 
原生事件：document DOM 事件监听！

Les conclusions suivantes peuvent être tirées :

• Réagissez à tous les événements Ils sont tous montés sur l'objet document

• Lorsque le véritable élément DOM déclenche l'événement, il remontera jusqu'à l'objet document puis traitera l'événement React

• Donc l'événement natif sera exécuté en premier, puis l'événement React sera traité

• Enfin Le processus correspondant d'exécution réelle de l'événement monté sur le document

est comme indiqué dans la figure :

Donc, si vous voulez pour éviter tout comportement de bouillonnement à différentes périodes, vous devez utiliser différentes méthodes, qui sont les suivantes :

• Bloquer Pour éviter le bouillonnement entre les événements synthétiques, utilisez e.stopPropagation()

• pour arrêter le bouillonnement entre les événements synthétiques et les événements sur le document le plus externe, et utilisez e.nativeEvent.stopImmediatePropagation()

• pour empêcher les événements synthétiques de se propager. Le bouillonnement des événements natifs sur le document le plus externe peut être évité en jugeant e.target

document.body.addEventListener('click', e => {   
    if (e.target && e.target.matches('div.code')) {  
        return;    
    }    
    this.setState({   active: false,    });   }); 
}

. 3. Résumé

Le mécanisme des événements React se résume ainsi :
• Les événements enregistrés sur React seront éventuellement liés au DOM du document, plutôt qu'au DOM correspondant au composant React (la surcharge mémoire est réduite car tous les événements sont liés au document et les autres nœuds n'ont pas d'événements liés)

• React lui-même implémente un ensemble de mécanismes de bouillonnement d'événements, c'est pourquoi notre event.stopPropagation() n'est pas valide.

• React remonte du composant déclenché au composant parent via la file d'attente, puis appelle le rappel défini dans leur JSX

• React possède son propre ensemble d'événements synthétiques, SyntheticEvent

(Partage de vidéos d'apprentissage :

Vidéo de base sur la programmation)

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!