React: Das Ereignissystem von React verstehen

Überblick über das Ereignissystem von React

Was ist ein synthetisches Ereignis?

Synthetische Ereignisse sind ein von React entwickelter Ereignisverarbeitungsmechanismus, um browserübergreifende Kompatibilität zu erreichen, die Leistung zu optimieren und die Ereignisverarbeitung zu vereinfachen. Es kapselt native Browser-Ereignisse, bietet einen einheitlichen API- und Ereignisbehandlungsansatz und gewährleistet so ein konsistentes Ereignisverhalten über verschiedene Browser hinweg.

Funktionsprinzip synthetischer Ereignisse

Veranstaltungsdelegation

React verarbeitet Ereignisse über einen Ereignisdelegierungsmechanismus. Ereignisdelegation bedeutet, dass React Ereignis-Listener nicht direkt an jedes DOM-Element bindet. Stattdessen bindet es alle Ereignis-Listener an einen einzelnen Stammknoten (normalerweise das Dokument oder den Stammcontainer der Anwendung). Wenn ein Benutzer mit der Seite interagiert und ein Ereignis auslöst, wird das Ereignis im DOM-Baum zum Stammknoten weitergeleitet, wo React das Ereignis erfasst und als synthetisches Ereignis verpackt.

Vorteile der Event-Delegation:

• Leistungsoptimierung: Reduziert die Anzahl der Event-Handler, die gebunden werden müssen, und senkt dadurch die Speichernutzung.

• Vereinfachte Ereignisverwaltung: Durch die Verwaltung aller Ereignisse am Stammknoten kann React die Ereignisweitergabe effizienter handhaben, Standardverhalten verhindern und andere ereignisbezogene Vorgänge ausführen.

Event-Pooling

Ein Schlüsselmechanismus hinter synthetischen Ereignissen ist das Ereignis-Pooling. Event-Pooling bedeutet, dass React Event-Objekte wiederverwendet, anstatt jedes Mal, wenn ein Event ausgelöst wird, ein neues Event-Objekt zu erstellen. Wenn ein Ereignis auftritt, entnimmt React ein Ereignisobjekt aus dem Ereignispool, initialisiert es und übergibt es an den Ereignishandler. Nachdem die Ereignisbehandlung abgeschlossen ist, wird das Ereignisobjekt bereinigt und zur Wiederverwendung im nächsten Ereignis an den Ereignispool zurückgegeben.

Vorteile des Event-Poolings:

• Reduzierte Speicherzuweisung: Durch die Wiederverwendung von Ereignisobjekten vermeidet React häufige Speicherzuweisungs- und Garbage-Collection-Vorgänge, was die Leistung erheblich verbessern kann, insbesondere bei hochfrequenten Ereignissen wie Mausbewegungen oder Scrollen.

Lebenszyklus synthetischer Ereignisse

Aufgrund des Event-Poolings unterscheidet sich der Lebenszyklus synthetischer Events von dem nativer Events. Normalerweise werden die Eigenschaften des synthetischen Ereignisobjekts nach Abschluss der Ausführung der Ereignishandlerfunktion auf Null zurückgesetzt, damit es zur Wiederverwendung an den Pool zurückgegeben werden kann.

Hinweise:

Asynchrone Vorgänge: Wenn Sie innerhalb eines asynchronen Vorgangs auf das Ereignisobjekt zugreifen müssen, müssen Sie die Methode event.persist() aufrufen. Dadurch wird verhindert, dass das Ereignisobjekt an den Pool zurückgegeben wird, und sichergestellt, dass es während des asynchronen Vorgangs nicht zurückgesetzt wird.

API und Verwendung synthetischer Ereignisse

Die React Synthetic Event API bietet eine Reihe von Schnittstellen ähnlich den nativen Browserereignissen, die häufig in React verwendet werden. Nachfolgend finden Sie eine detaillierte Einführung in einige häufig verwendete Methoden und Eigenschaften sowie Beispiele, die deren Verwendungsszenarien veranschaulichen.

a. präventDefault()

Die Methode „preventDefault()“ wird verwendet, um das Standardverhalten eines Ereignisses zu verhindern. Das Standardverhalten bezieht sich auf die Aktionen, die der Browser normalerweise ausführt, wenn ein Ereignis eintritt, z. B. das Aktualisieren der Seite, wenn ein Formular gesendet wird, oder das Navigieren zu einer neuen Seite, wenn auf einen Link geklickt wird.

Beispiel: Verhindern des standardmäßigen Formularübermittlungsverhaltens

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

Wenn in diesem Beispiel „preventDefault()“ nicht aufgerufen wird, wird durch Klicken auf die Schaltfläche „Senden“ die Formularübermittlung ausgelöst, wodurch die Seite aktualisiert wird. Durch den Aufruf von „preventDefault()“ wird das Standardverhalten verhindert, sodass Sie stattdessen die Formularverarbeitungslogik anpassen können.

b. stopPropagation()
Die Methode stopPropagation() wird verwendet, um die weitere Ausbreitung eines Ereignisses zu stoppen. Ereignisse breiten sich typischerweise vom Zielelement, in dem das Ereignis ausgelöst wurde, bis zu seinen übergeordneten Elementen aus (Ereignis-Bubbling). Durch den Aufruf von stopPropagation() können Sie diese Ausbreitung verhindern.

Beispiel: Stoppen der Ausbreitung eines Klickereignisses

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

In diesem Beispiel löst das Klicken auf die Schaltfläche den Click-Event-Handler in der Child-Komponente aus. Standardmäßig würde das Ereignis zur übergeordneten Komponente übergehen und auch deren Click-Handler auslösen. Durch den Aufruf von stopPropagation() in der untergeordneten Komponente wird jedoch verhindert, dass das Ereignis an die übergeordnete Komponente weiterleitet.

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. Reihenfolge der Ereignisausführung
Zuerst werden native Ereignisse ausgeführt, gefolgt von synthetischen Ereignissen. Synthetische Ereignisse sprudeln auf und werden an das Dokument gebunden. Daher ist es ratsam, die Vermischung nativer und synthetischer Ereignisse zu vermeiden. Wenn ein natives Ereignis die Weitergabe stoppt, kann es die Ausführung des synthetischen Ereignisses verhindern, da synthetische Ereignisse darauf angewiesen sind, zur Ausführung an das Dokument heranzusprudeln.

Warum wählt React synthetische Ereignisse?

Zu den Gründen, warum React synthetische Ereignisse wählt, gehören:

• Browserübergreifende Konsistenz: Synthetische Ereignisse abstrahieren die Unterschiede in der Ereignisbehandlung in verschiedenen Browsern und sorgen so für konsistentes Verhalten in allen Browsern.

• Leistungsoptimierung: Ereignisdelegation und Ereignispooling reduzieren den Aufwand für die Ereignisverarbeitung erheblich und verbessern die Leistung der Anwendung.

• Besseres Ereignismanagement: Mit synthetischen Ereignissen kann React die Ereignisausbreitung effektiver steuern, Standardverhalten verhindern und sich für eine effizientere Ereignisbehandlung eng in den Batch-Update-Mechanismus von React integrieren.

Das obige ist der detaillierte Inhalt vonReact: Das Ereignissystem von React verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!