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.

SyntheticEvent

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

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

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

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

Copier après la connexion

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

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

Copier après la connexion

Tutoriel vidéo Redis, Tutoriel de programmation]

2. Ordre d'exécution

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;

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

• 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

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

Copier après la connexion

. 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!