React Hooks verstehen: Ein Leitfaden zur modernen React-Entwicklung

Was sind Hooks in React?

Hooks sind Funktionen, die es Entwicklern ermöglichen, sich in React-Status- und Lebenszyklusfunktionen von Funktionskomponenten einzubinden. Sie wurden in React 16.8 eingeführt, um Entwicklern die Verwendung von Status-, Kontext- und anderen React-Funktionen in Funktionskomponenten zu ermöglichen, ohne diese in Klassenkomponenten konvertieren zu müssen. Vor Hooks waren Klassenkomponenten die einzige Möglichkeit, Status, Lebenszyklusmethoden und andere Funktionen in React zu verarbeiten.

Hooks bieten eine prägnantere, lesbarere und wiederverwendbarere Möglichkeit, den Status und die Lebenszykluslogik in Funktionskomponenten zu verwalten. Durch die Nutzung von Hooks können React-Entwickler Komponenten schreiben, die einfacher, modularer und leichter zu testen sind.

---

1. Wichtige Hakentypen

1.1. useState Hook

Der Hook useState ist der grundlegendste Hook und ermöglicht es Ihnen, Ihren Funktionskomponenten einen Status hinzuzufügen. Es gibt ein Array zurück, das den aktuellen Statuswert und eine Funktion zum Aktualisieren dieses Werts enthält.

Beispiel:

import React, { useState } from 'react';

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

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

• useState verwendet den anfänglichen Zustandswert als Argument (in diesem Fall 0) und gibt ein Array mit der Zustandsvariablen (count) und der Funktion zu deren Aktualisierung (setCount) zurück.

1.2. useEffect Hook

Mit dem Hook useEffect können Sie Nebenwirkungen in Ihren Funktionskomponenten ausführen. Zu diesen Nebenwirkungen können Vorgänge wie das Abrufen von Daten, das Abonnieren von Ereignissen oder das manuelle Ändern des DOM gehören. Es ersetzt die Lebenszyklusmethoden von Klassenkomponenten wie ComponentDidMount, ComponentDidUpdate und ComponentWillUnmount.

Beispiel:

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

const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);

    // Cleanup function to clear the interval
    return () => clearInterval(timer);
  }, []); // Empty dependency array means this effect runs once, like componentDidMount

  return <p>Timer: {seconds} seconds</p>;
};

• useEffect wird standardmäßig nach jedem Rendern ausgeführt. Sie können jedoch ein zweites Argument – ​​ein Abhängigkeitsarray – übergeben, um zu steuern, wann der Effekt ausgeführt wird. Wenn das Abhängigkeitsarray leer ist, wird der Effekt nur einmal ausgeführt, wenn die Komponente bereitgestellt wird.

1.3. useContext Hook

Der Hook useContext ermöglicht Ihnen den Zugriff auf den Kontextwert für ein bestimmtes Context-Objekt. Dies ist nützlich, um Daten durch den Komponentenbaum zu leiten, ohne Requisiten auf jeder Ebene manuell übergeben zu müssen.

Beispiel:

import React, { useState } from 'react';

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

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

• useContext wird verwendet, um auf den Wert von ThemeContext innerhalb der ThemedComponent zuzugreifen, ohne die Theme-Requisite manuell zu übergeben.

1.4. Verwenden Sie den Reduzierhaken

Der useReducer-Hook ist eine Alternative zu useState, wenn Sie eine komplexere Zustandslogik verwalten müssen, insbesondere wenn der nächste Zustand vom vorherigen abhängt. Es funktioniert ähnlich wie Reduzierer in Redux.

Beispiel:

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

const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);

    // Cleanup function to clear the interval
    return () => clearInterval(timer);
  }, []); // Empty dependency array means this effect runs once, like componentDidMount

  return <p>Timer: {seconds} seconds</p>;
};

• useReducer nimmt eine Reduzierfunktion und einen Anfangszustand als Argumente und gibt den aktuellen Zustand und eine Dispatch-Funktion zurück, um Aktionen an den Reduzierer zu senden.

1.5. Verwenden Sie den Callback-Hook

Der Hook useCallback gibt eine gespeicherte Version einer Funktion zurück, die sich nur ändert, wenn sich eine der Abhängigkeiten geändert hat. Dies kann dazu beitragen, die Leistung zu optimieren, indem unnötige Neuerstellungen von Funktionen verhindert werden, insbesondere wenn diese als Requisiten an untergeordnete Komponenten übergeben werden.

Beispiel:

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

const ThemedComponent = () => {
  const theme = useContext(ThemeContext);
  return <div>The current theme is {theme}</div>;
};

const App = () => {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedComponent />
    </ThemeContext.Provider>
  );
};

• useCallback verhindert, dass die handleClick-Funktion bei jedem Rendern neu erstellt wird, wodurch die Leistung optimiert wird, insbesondere bei großen Anwendungen.

1.6. Verwenden SieMemo Hook

Der useMemo-Hook ähnelt useCallback, gibt jedoch einen gespeicherten Wert anstelle einer gespeicherten Funktion zurück. Es hilft, die Leistung zu optimieren, indem Werte nur bei Bedarf neu berechnet werden.

Beispiel:

import React, { useReducer } from 'react';

// Reducer function
const counterReducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const Counter = () => {
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
};

• useMemo hilft, teure Berechnungen zu vermeiden, indem es das Ergebnis der Berechnung speichert, bis sich die relevanten Abhängigkeiten (in diesem Fall die Anzahl) ändern.

---

2. Vorteile von Haken

1. Einfacherer und prägnanterer Code

Hooks ermöglichen Ihnen die Verwendung von Status- und anderen Features in Funktionskomponenten, ohne klassenbasierte Komponenten schreiben zu müssen, was zu weniger Boilerplate-Code und besser lesbaren Komponenten führt.

2. Bessere Wiederverwendbarkeit

Mit Hooks können Sie Komponentenlogik in benutzerdefinierte Hooks extrahieren, wodurch es einfacher wird, Logik über verschiedene Komponenten hinweg zu teilen, ohne Code zu duplizieren.

3. Kein „dieses“ Schlüsselwort mehr

Da Hooks in Funktionskomponenten verwendet werden, besteht kein Grund zur Sorge über das Schlüsselwort this, das in Klassenkomponenten häufig zu Verwirrung führt.

4. Verbesserte Code-Organisation

Hooks ermöglichen es Ihnen, verwandte Logik zusammenzuhalten. Sie können beispielsweise „useEffect“ für Nebenwirkungen und „useState“ für die Zustandsverwaltung verwenden, alles innerhalb derselben Komponente, was die Überlegung erleichtert.

---

3. Fazit

Hooks sind eine leistungsstarke Funktion von React, die es Entwicklern ermöglicht, Status, Lebenszyklusmethoden und andere React-Funktionen in Funktionskomponenten zu verwenden. Durch die Verwendung von Hooks wie useState, useEffect, useContext und useReducer können React-Entwickler saubereren, besser wartbaren und modularen Code schreiben. Hooks machen funktionale Komponenten leistungsfähiger und ermöglichen die Verwendung moderner Funktionen wie Zustand und Nebenwirkungen ohne die Komplexität von Klassenkomponenten.

---

Das obige ist der detaillierte Inhalt vonReact Hooks verstehen: Ein Leitfaden zur modernen React-Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!