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!