Heim > Artikel > Web-Frontend > 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.
Lebenszyklusmethoden sind spezielle Methoden, die in verschiedenen Phasen des Lebenszyklus einer Komponente aufgerufen werden. Hier sind einige der gängigsten Lebenszyklusmethoden und ihre Zwecke:
constructor(props) { super(props); this.state = { count: 0 }; }
componentDidMount() { this.fetchData(); }
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(); } }
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(); }
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); }
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:
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> ); };
useEffect ermöglicht es uns, Nebenwirkungen in Funktionskomponenten auszuführen. Es kombiniert die Funktionalitäten von ComponentDidMount, ComponentDidUpdate und ComponentWillUnmount.
constructor(props) { super(props); this.state = { count: 0 }; }
componentDidMount() { this.fetchData(); }
componentDidUpdate(prevProps) { if (this.props.id !== prevProps.id) { this.fetchData(); } }
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.
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> ); };
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> ); };
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:
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!