Erkundung von React Hooks und React 19-Innovationen

Hooks revolutionierten die React-Entwicklung, indem sie es funktionalen Komponenten ermöglichten, Status, Nebenwirkungen und komplexe Logik elegant zu verwalten. Mit React 19 wurden neue Hooks eingeführt, um den Workflow weiter zu rationalisieren. In diesem Artikel werden wir klassische Hooks, erweiterte Hooks und die Neuerungen in Version 19 anhand praktischer Beispiele untersuchen.

Grundlegende Reaktionshaken

useState: Einfache Statusverwaltung

Verwaltet lokale Zustände in Funktionskomponenten. Ideal für Werte, die sich im Laufe der Zeit ändern.

Beispiel: Interaktiver Zähler

import { useState } aus 'react';

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

zurück (

useEffect: Nebenwirkungen

Führt Code nach dem Rendern aus, z. B. API-Aufrufe oder DOM-Manipulation.

Beispiel: Daten von einer API abrufen

import { useState, useEffect } from 'react';

Funktion UserList() { const [users, setUsers] = useState([]);

useEffect(() => { fetch('https://api.example.com/users') .then(response => Response.json()) .then(data => setUsers(data)); }, []); // Nur einmal ausführen

zurück (

{users.map(user => (
• {user.name}
))}

useContext: Globale Statusfreigabe

Greift auf Kontextwerte zu, ohne Prop Drilling durchzuführen.

Beispiel: Dunkel/Hell-Thema

import { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

Funktion App() { const [theme, setTheme] = useState('light');

zurück ( <ThemeContext.Provider value=> </ThemeContext.Provider> ); }

Funktion Toolbar() { const { theme, setTheme } = useContext(ThemeContext);

zurück ( <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}> Zum Thema wechseln {theme === 'light' ? 'dunkel': 'hell'} ); }

useRef: Veränderbare Referenzen

Speichert Werte, die zwischen den Renderings bestehen bleiben, ohne dass es zu erneuten Renderings kommt.

Beispiel: Fokus auf Eingabe

import { useRef } aus 'react';

Funktion TextInput() { const inputRef = useRef(null);

const focusInput = () => { inputRef.current.focus(); };

zurück (

Erweiterte und benutzerdefinierte Hooks

useReducer: Komplexer Zustand

Verwaltet Zustände mit ausgefeilterer Logik, ähnlich wie Redux.

Beispiel: Aufgabenliste

import { useReducer } aus 'react';

Funktion todosReducer(state, action) { switch (action.type) { Fall 'ADD_TODO': return [...state, { text: action.text, abgeschlossen: false }]; Fall 'TOGGLE_TODO': return state.map((todo, index) => index === action.index ? { ...todo, abgeschlossen: !todo.completed } : todo ); Standard: Rückkehrzustand; } }

Funktion TodoApp() { const [Todos, Dispatch] = useReducer(todosReducer, []);

const handleSubmit = (e) => { e.preventDefault(); Dispatch({ Typ: 'ADD_TODO', Text: e.target.elements.todo.value }); e.target.reset(); };

zurück (

useMemo und useCallback: Leistungsoptimierung

• useMemo: Speichert berechnete Werte.
• useCallback: Merkt sich Funktionen.

Beispiel: Schwere Berechnung

import { useMemo, useState } from 'react';

Funktion ExpensiveComponent({ list }) { const sortedList = useMemo(() => { console.log('Bestellliste...'); return [...list].sort(); }, [Liste]);

return

Benutzerdefinierte Hooks: Wiederverwendung von Logik

Beispiel: useFetch für HTTP-Anfragen

import { useState, useEffect } from 'react';

Funktion useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true);

useEffect(() => { abrufen(URL) .then(res => res.json()) .then(data => { setData(date); setLoading(false); }); }, [URL]);

return { Daten, wird geladen }; }

// Verwendung in der Komponente: Funktion UserProfile({ userId }) { const { Daten: Benutzer, wird geladen } = useFetch(https://api.example.com/users/${userId});

if (loading) return

Neue React 19 Hooks

useOptimistic: Optimistische Updates

Aktualisiert die Benutzeroberfläche vor dem Server-Commit und führt bei einem Fehler ein Rollback durch.

Beispiel: Hinzufügung eines optimistischen Kommentars

import { useOptimistic } from 'react';

Funktion CommentForm({ onSubmit }) { const [optimisticComments, addOptimisticComment] = useOptimistic( [], (state, newComment) => [...state, { text: newComment, sent: true }] );

const handleSubmit = async (e) => { e.preventDefault(); const formData = new FormData(e.target); const comment = formData.get('comment');

addOptimisticComment(comment);

versuche es mit {
  Warten Sie auf onSubmit(comment);
} Catch (Fehler) {
  // Die Benutzeroberfläche zurücksetzen, wenn die Anfrage fehlschlägt
}

};

zurück (

useResource: Integration mit Suspense

Verwaltet asynchrone Daten deklarativ.

Beispiel: Laden von Daten mit Fallback

import { useResource, Suspense } from 'react';

Funktion fetchUser(id) { // Gibt ein Versprechen zurück }

Funktion UserProfile({ userId }) { const userResource = useResource(() => fetchUser(userId));

return

// Verwendung in der übergeordneten Komponente: <Suspense fallback={