React Js Part Lifecycle-Methoden und Hooks in React

React ist eine JavaScript-Bibliothek, die es uns ermöglicht, Benutzeroberflächen deklarativ zu erstellen. Eines der Schlüsselkonzepte in React ist die Art und Weise, wie wir den Lebenszyklus von Komponenten verwalten. In diesem Artikel werden wir zwei Hauptaspekte diskutieren: Lebenszyklusmethoden in Klassenkomponenten und Hooks.

1. Lebenszyklusmethoden in Klassenkomponenten

Lebenszyklusmethoden sind spezielle Methoden, die in verschiedenen Phasen des Lebenszyklus einer Komponente aufgerufen werden. Hier sind einige der gängigsten Lebenszyklusmethoden und ihre Zwecke:

A. Montage

• Konstruktor (Requisiten): Die erste aufgerufene Methode. Wird normalerweise zum Initialisieren von Status- und Bindungsmethoden verwendet.

constructor(props) {
  super(props);
  this.state = { count: 0 };
}

• ComponentDidMount(): Wird aufgerufen, nachdem die Komponente zum ersten Mal im DOM gemountet wurde. Ideal zum Abrufen von Daten oder zum Initialisieren von Abonnements.

componentDidMount() {
  this.fetchData();
}

B. Aktualisierung

componentDidUpdate(prevProps, prevState): Wird nach den Komponentenaktualisierungen aufgerufen. Nützlich, um auf Änderungen in Requisiten oder Zustand zu reagieren. Stellen Sie sicher, dass Sie nach Änderungen suchen, um Endlosschleifen zu vermeiden.

componentDidUpdate(prevProps) {
  if (this.props.id !== prevProps.id) {
    this.fetchData();
  }
}

C. Absteigen

componentWillUnmount(): Wird direkt vor dem Entfernen der Komponente aus dem DOM aufgerufen. Nützlich zum Bereinigen von Abonnements, Timern oder anderen Vorgängen, die bereinigt werden müssen.

componentWillUnmount() {
  this.cleanup();
}

D. Fehlerbehandlung

componentDidCatch(error, info): Wird zum Abfangen von Fehlern in untergeordneten Komponenten verwendet. Nützlich für die zentrale Fehlerbehandlung.

componentDidCatch(error, info) {
  logErrorToMyService(error, info);
}

2. Einführung in React Hooks

React Hooks sind eine Funktion, die es uns ermöglicht, Zustands- und Lebenszyklusmethoden zu verwenden, ohne Klassenkomponenten zu schreiben. Hier sind einige der am häufigsten verwendeten Haken:

A. useState()

Wird verwendet, um Funktionskomponenten einen Status hinzuzufügen. Diese Funktion gibt ein Paar zurück: den aktuellen Status und eine Funktion zum Aktualisieren.

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

B. useEffect()

useEffect ermöglicht es uns, Nebenwirkungen in Funktionskomponenten auszuführen. Es kombiniert die Funktionalitäten von ComponentDidMount, ComponentDidUpdate und ComponentWillUnmount.

• Beispiel 1: useEffect mit einem leeren Array ([]) Wenn useEffect mit einem leeren Array als Abhängigkeit verwendet wird, wird der Effekt nur einmal ausgeführt, nachdem die Komponente gemountet wurde.

constructor(props) {
  super(props);
  this.state = { count: 0 };
}

• Beispiel 2: useEffect ohne Abhängigkeitsarray Wenn useEffect ohne Abhängigkeitsarray bereitgestellt wird, wird der Effekt jedes Mal ausgeführt, wenn die Komponente erneut gerendert wird.

componentDidMount() {
  this.fetchData();
}

• Beispiel 3: useEffect mit einem Array von Abhängigkeiten Wenn Sie ein Array von Abhängigkeiten bereitstellen, wird der Effekt immer dann ausgeführt, wenn sich einer der Werte im Array ändert.

componentDidUpdate(prevProps) {
  if (this.props.id !== prevProps.id) {
    this.fetchData();
  }
}

C. useContext()

Der useContext Hook wird verwendet, um auf den Kontext in Funktionskomponenten zuzugreifen. Dies ist besonders nützlich, um globale Daten wie Themen oder Benutzerauthentifizierungsstatus ohne Drilling zu teilen.

Beispiel: Theming mit useContext
In diesem Beispiel erstellen wir einen einfachen Themenkontext, der es uns ermöglicht, zwischen hellen und dunklen Themen zu wechseln.

1. Erstellen Sie den Themenkontext
Zuerst erstellen wir einen Kontext für das Thema.

componentWillUnmount() {
  this.cleanup();
}

2. Nutzen Sie den Themenkontext
Als Nächstes können wir eine Komponente erstellen, die den Themenkontext nutzt, um Stile anzuwenden und eine Schaltfläche zum Umschalten des Themas bereitzustellen.

componentDidCatch(error, info) {
  logErrorToMyService(error, info);
}

3. Verpacken Sie die Anwendung mit dem Theme-Anbieter
Schließlich verpacken wir unsere Anwendung (oder einen Teil davon) mit dem ThemeProvider, um den untergeordneten Elementen den Themenkontext bereitzustellen.

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

Erklärung

• Theme-Kontext-Erstellung: Wir erstellen einen ThemeContext mit createContext und einer ThemeProvider-Komponente, die den aktuellen Theme-Status verwaltet und eine Funktion zum Umschalten bereitstellt.

• Kontextverbrauch: In der ThemedComponent verwenden wir useContext(ThemeContext), um auf das aktuelle Thema und die Umschaltfunktion zuzugreifen. Diese Komponente rendert unterschiedliche Inhalte basierend auf dem aktuellen Thema und enthält eine Schaltfläche zum Umschalten.

• Anwendungsstruktur: Die gesamte Anwendung (oder ein Teil davon) ist in den ThemeProvider eingeschlossen, sodass jede untergeordnete Komponente auf den Themenkontext zugreifen kann.

D. useMemo() und useCallback()

• useMemo(): Zwischenspeichert das Ergebnis aufwendiger Berechnungen, um eine Neuberechnung bei jedem Rendern zu vermeiden.

import React, { useState, useEffect } from 'react';

const FetchDataOnce = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
    };

    fetchData();
  }, []); // Effect runs only once when the component mounts

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

• useCallback(): Zwischenspeichert Funktionen, um zu vermeiden, dass sie bei jedem Rendern neu erstellt werden.

import React, { useState, useEffect } from 'react';

const CountComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`Count updated: ${count}`);

    const fetchData = async () => {
      const response = await fetch(`https://api.example.com/data/${count}`);
      const result = await response.json();
      console.log(result);
    };

    fetchData();
  }); // Effect runs every time the component renders

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

3. Vorteile der Verwendung von Hooks

Hooks bieten Flexibilität und die Möglichkeit, Logik zwischen Komponenten zu teilen, ohne Higher Order Components (HOCs) oder Render-Requisiten verwenden zu müssen. Zu den Vorteilen der Verwendung von Hooks gehören:

• Einfachheit und Klarheit: Code wird sauberer und leichter lesbar.
• Flexibilität: Logik kann in kleinere Funktionen unterteilt werden, die überall wiederverwendet werden können.
• Reduzierte Komplexität: Vermeidet die Verwendung von Klassen und komplizierten Lebenszyklusmethoden.

---

Lebenszyklusmethoden und Hooks sind zwei wichtige Aspekte der React-Entwicklung. Wenn wir verstehen, wie beide Konzepte funktionieren, können wir effizientere und wartbarere Komponenten erstellen. Insbesondere Hooks eröffnen neue Möglichkeiten für die Entwicklung funktionaler Komponenten und verändern die Art und Weise, wie wir mit Zuständen und Nebenwirkungen interagieren.

Durch die Beherrschung von Lebenszyklusmethoden und Hooks können Sie robustere und reaktionsfähigere React-Anwendungen erstellen. Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonReact Js Part Lifecycle-Methoden und Hooks in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!