React : Comprendre le système d'événements de React

Présentation du système d'événements de React

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

Les

Événements synthétiques sont un mécanisme de gestion d'événements conçu par React pour assurer la compatibilité entre navigateurs, optimiser les performances et simplifier la gestion des événements. Il encapsule les événements natifs du navigateur, fournissant une API unifiée et une approche de gestion des événements, garantissant un comportement cohérent des événements sur différents navigateurs.

Principe de fonctionnement des événements synthétiques

Délégation d'événement

React gère les événements via un mécanisme de délégation d'événements. La délégation d'événements signifie que React ne lie pas directement les écouteurs d'événements à chaque élément DOM. Au lieu de cela, il lie tous les écouteurs d'événements à un seul nœud racine (généralement le document ou le conteneur racine de l'application). Lorsqu'un utilisateur interagit avec la page et déclenche un événement, l'événement remonte dans l'arborescence DOM jusqu'au nœud racine, où React capture l'événement et l'encapsule comme un événement synthétique.

Avantages de la délégation événementielle :

• Optimisation des performances : Cela réduit le nombre de gestionnaires d'événements qui doivent être liés, réduisant ainsi l'utilisation de la mémoire.

• Gestion simplifiée des événements : En gérant tous les événements au niveau du nœud racine, React peut gérer plus efficacement la propagation des événements, empêcher les comportements par défaut et effectuer d'autres opérations liées aux événements.

Mise en commun d'événements

Un mécanisme clé derrière les événements synthétiques est le pooling d'événements. Le regroupement d'événements signifie que React réutilise les objets événement au lieu de créer un nouvel objet événement à chaque fois qu'un événement est déclenché. Lorsqu'un événement se produit, React prend un objet événement du pool d'événements, l'initialise et le transmet au gestionnaire d'événements. Une fois la gestion de l'événement terminée, l'objet événement est nettoyé et renvoyé dans le pool d'événements pour être réutilisé lors du prochain événement.

Avantages de la mutualisation d'événements :

• Allocation de mémoire réduite : En réutilisant les objets d'événement, React évite les allocations de mémoire fréquentes et les opérations de récupération de place, ce qui peut améliorer considérablement les performances, en particulier pour les événements à haute fréquence comme les mouvements de souris ou le défilement.

Cycle de vie des événements synthétiques

En raison du pooling d'événements, le cycle de vie des événements synthétiques diffère de celui des événements natifs. En règle générale, une fois l'exécution de la fonction de gestionnaire d'événements terminée, les propriétés de l'objet d'événement synthétique sont réinitialisées à null afin qu'il puisse être renvoyé au pool pour réutilisation.

Points à noter :

Opérations asynchrones : Si vous devez accéder à l'objet événement dans le cadre d'une opération asynchrone, vous devez appeler la méthode event.persist(). Cela empêchera l'objet d'événement d'être renvoyé au pool, garantissant ainsi qu'il ne sera pas réinitialisé pendant l'opération asynchrone.

API et utilisation d'événements synthétiques

L'API React Synthetic Event fournit un ensemble d'interfaces similaires aux événements natifs du navigateur, qui sont couramment utilisés dans React. Vous trouverez ci-dessous une introduction détaillée à certaines méthodes et propriétés fréquemment utilisées, ainsi que des exemples illustrant leurs scénarios d'utilisation.

a. prévenirDefault()

La méthode PreventDefault() est utilisée pour empêcher le comportement par défaut d'un événement. Le comportement par défaut fait référence aux actions que le navigateur effectue habituellement lorsqu'un événement se produit, comme l'actualisation de la page lorsqu'un formulaire est soumis ou la navigation vers une nouvelle page lorsqu'un lien est cliqué.

Exemple : Empêcher le comportement d'envoi de formulaire par défaut

function MyForm() {
  const handleSubmit = e => {
    e.preventDefault(); // Prevent the default form submission behavior
    console.log('Form submission prevented');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

Dans cet exemple, si PreventDefault() n'est pas appelé, cliquer sur le bouton Soumettre déclenchera la soumission du formulaire, provoquant l'actualisation de la page. En appelant PreventDefault(), le comportement par défaut est empêché, vous permettant ainsi de personnaliser la logique de gestion du formulaire.

b. stopPropagation()
La méthode stopPropagation() est utilisée pour arrêter la propagation ultérieure d'un événement. Les événements se propagent généralement depuis l'élément cible où l'événement a été déclenché jusqu'à ses éléments parents (bullage d'événements). En appelant stopPropagation(), vous pouvez empêcher cette propagation.

Exemple : Arrêter la propagation d'un événement de clic

function Parent() {
  const handleParentClick = () => {
    console.log('Parent clicked');
  };

  return (
    <div onClick={handleParentClick}>
      Parent Div
      <Child />
    </div>
  );
}

function Child() {
  const handleChildClick = e => {
    e.stopPropagation(); // Stop the event from bubbling up to the parent element
    console.log('Child clicked');
  };

  return <button onClick={handleChildClick}>Click Me</button>;
}

Dans cet exemple, cliquer sur le bouton déclenche le gestionnaire d'événements de clic dans le composant Enfant. Par défaut, l'événement remonterait jusqu'au composant Parent et déclencherait également son gestionnaire de clics. Cependant, en appelant stopPropagation() dans le composant Child, la diffusion de l'événement vers le parent est empêchée.

c. target
The target property refers to the actual DOM element that triggered the event. It is commonly used to access the element that initiated the event and to handle logic related to that element.

*Example: Accessing the element that triggered the event *

function MyComponent() {
  const handleClick = e => {
    console.log('Clicked element:', e.target);
  };

  return (
    <div onClick={handleClick}>
      <button>Button 1</button>
      <button>Button 2</button>
    </div>
  );
}

In this example, when either button is clicked, the e.target in the handleClick function will point to the button element that was clicked. The target property is used to identify which specific element was clicked.

d. currentTarget
The currentTarget property refers to the DOM element to which the event handler is bound. During event handling, regardless of which child element the event bubbles to, currentTarget always points to the element that the event handler is attached to.

Example: Distinguishing between target and currentTarget

function MyComponent() {
  const handleClick = e => {
    console.log('Clicked element:', e.target);
    console.log('Event handler bound to:', e.currentTarget);
  };

  return (
    <div onClick={handleClick}>
      <button>Button 1</button>
      <button>Button 2</button>
    </div>
  );
}

In this example, when any button is clicked, event.target will point to the button that was clicked, while event.currentTarget will always point to the parent div element where the event handler is bound.

e. persist()
The persist() method is used to retain the event object, preventing React from reusing it. This method is typically needed in asynchronous operations.

Example: Using the event object in an asynchronous operation

function MyComponent() {
  const handleClick = e => {
    e.persist(); // Retain the event object

    setTimeout(() => {
      console.log('Button clicked:', event.target);
    }, 1000);
  };

  return <button onClick={handleClick}>Click Me</button>;
}

In this example, because the event object might be reused in asynchronous operations, persist() is called to retain the event object, ensuring that the event properties can be safely accessed in the setTimeout callback.

React Synthetic Event Types

React provides various types of synthetic events that cover common user interaction scenarios. Below are some commonly used synthetic event types along with examples:

a. Mouse Events

• onClick: Triggered when an element is clicked.

• onDoubleClick: Triggered when an element is double-clicked.

• onMouseDown: Triggered when a mouse button is pressed down on an element.

• onMouseUp: Triggered when a mouse button is released on an element.

• onMouseMove: Triggered when the mouse is moved over an element.

• onMouseEnter: Triggered when the mouse pointer enters the element's area; does not bubble.

• onMouseLeave: Triggered when the mouse pointer leaves the element's area; does not bubble.

Example: Using onClick and onMouseMove

function MouseTracker() {
  const handleMouseMove = e => {
    console.log(`Mouse position: (${e.clientX}, ${e.clientY})`);
  };

  return (
    <div onMouseMove={handleMouseMove} style={{ height: '200px', border: '1px solid black' }}>
      Move your mouse here
    </div>
  );
}

function MyApp() {
  return (
    <div>
      <button onClick={() => console.log('Button clicked!')}>Click Me</button>
      <MouseTracker />
    </div>
  );
}

In this example, the MouseTracker component logs the mouse position whenever it moves within the div area, while the button in the MyApp component logs a message when clicked.

b. Keyboard Events

• onKeyDown: Triggered when a key is pressed down on the keyboard.

• onKeyUp: Triggered when a key is released on the keyboard.

• onKeyPress: Triggered when a key is pressed and held down (deprecated; it is recommended to use onKeyDown instead).

Example: Handling the onKeyDown Event

function KeyHandler() {
  const handleKeyDown = e => {
    console.log('Key pressed:', e.key);
  };

  return <input type="text" onKeyDown={handleKeyDown} placeholder="Press any key" />;
}

In this example, when the user presses any key while focused on the input field, the handleKeyDown function logs the name of the pressed key.

c. Focus Events

• onFocus: Triggered when an element gains focus.

• onBlur: Triggered when an element loses focus.

Example: Handling onFocus and onBlur Events

function FocusExample() {
  return (
    <input
      onFocus={() => console.log('Input focused')}
      onBlur={() => console.log('Input blurred')}
      placeholder="Focus and blur me"
    />
  );
}

In this example, when the input field gains or loses focus, a corresponding message is logged to the console.

d. Form Events

• onChange: Triggered when the value of a form control changes.

• onSubmit: Triggered when a form is submitted.

• onInput: Triggered when the user inputs data (including actions like deleting or pasting).

Example: Handling onChange and onSubmit Events

function MyForm() {
  const [value, setValue] = React.useState('');

  const handleChange = e => {
    setValue(e.target.value);
  };

  const handleSubmit = e => {
    e.preventDefault();
    console.log('Form submitted with value:', value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={value} onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
}

In this example, as the user types into the input field, the handleChange function updates the component's state. When the form is submitted, the handleSubmit function logs the current value of the input field.

Differences Between React Events and Regular HTML Events

a. Event Naming

• Native: All lowercase (e.g., onclick).

• React: CamelCase (e.g., onClick).

b. Event Handler Syntax

• Native events use strings to specify event handlers.

• React events use functions as event handlers.

c. Preventing Default Browser Behavior

• Native: can use 'return false' to prevent the browser's default behavior.

• React: Instead, you must explicitly call preventDefault() to achieve this.

d. Ordre d'exécution de l'événement
Les événements natifs s'exécutent en premier, suivis des événements synthétiques. Des événements synthétiques bouillonnent et sont liés au document. Il est donc conseillé d’éviter de mélanger des événements natifs et synthétiques. Si un événement natif arrête la propagation, il peut empêcher l'exécution de l'événement synthétique, car les événements synthétiques reposent sur la propagation jusqu'au document pour s'exécuter.

Pourquoi React choisit-il les événements synthétiques

Les raisons pour lesquelles React choisit les événements synthétiques incluent :

• Cohérence entre navigateurs : Les événements synthétiques éliminent les différences de gestion des événements entre les différents navigateurs, garantissant ainsi un comportement cohérent sur tous les navigateurs.

• Optimisation des performances : La délégation et le regroupement d'événements réduisent considérablement la surcharge de gestion des événements, améliorant ainsi les performances de l'application.

• Meilleure gestion des événements : Grâce aux événements synthétiques, React peut contrôler plus efficacement la propagation des événements, empêcher les comportements par défaut et s'intégrer étroitement au mécanisme de mise à jour par lots de React pour une gestion plus efficace des événements.

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!