React Hooks

React Hooks sind ein wichtiges Feature, das in React 16.8 eingeführt wurde. Sie ermöglichen Funktionskomponenten, einige Merkmale von Klassenkomponenten zu nutzen, wie State-Management und die Verwendung von Lebenszyklusmethoden.

Mit Hooks können Sie React-Komponenten prägnanter und flexibler schreiben.

1. Was sind React Hooks?

React Hooks sind ein Erweiterungsmechanismus für Funktionskomponenten, der es Ihnen ermöglicht, React-Features zu nutzen, ohne Klassenkomponenten zu schreiben. Die wichtigsten Hooks umfassenuseState, useEffect, useContext, useReducer, useCallback, useMemo, useRef, unduseImperativeHandleusw. Diese Hooks bieten eine Möglichkeit, auf React-Funktionen zuzugreifen, sodass Sie Ihren Code besser organisieren und wiederverwenden können.

2. Wichtige React Hooks

useState

useStateDer Hook ermöglicht es Ihnen, lokalen State in Funktionskomponenten zu verwenden. Er gibt einen State-Wert und eine Funktion zum Aktualisieren dieses State-Werts zurück.

Beispiel

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Sie haben {count} Mal geklickt</p>
      <button onClick={() => setCount(count + 1)}>Klick mich</button>
    </div>
  );
}

useEffect

useEffectDer Hook ermöglicht es Ihnen, Seiteneffekt-Operationen in Funktionskomponenten auszuführen (wie Datenabruf, Abonnementverwaltung, DOM-Operationen usw.). Er wird nach jedem Render ausgeführt.

Beispiel

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

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

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(seconds => seconds + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []); // Ein leeres Array als zweiter Parameter bedeutet, dass er nur ausgeführt wird, wenn die Komponente gemountet und unmountet wird

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

Im Folgenden werden einige wichtige React-Hooks und ihre Verwendungszwecke vorgestellt:

useState - Wird verwendet, um State in Funktionskomponenten hinzuzufügen; man kann damit Daten verfolgen, die sich im Laufe der Zeit ändern.

const [state, setState] = useState(initialState);

useEffect- Wird verwendet, um Seiteneffekt-Operationen auszuführen, wie Datenabruf, Abonnements oder manuelles Ändern des DOM. Es ähnelt den Lifecycle-Methoden componentDidMount, componentDidUpdate und componentWillUnmount in Klassenkomponenten.

useEffect(() => {
  // 执行副作用操作
  return () => {
    // 清理操作
  };
}, [dependencies]); // 依赖数组

useContext- Wird verwendet, um auf Daten zuzugreifen, die über den React-Kontext im Komponentenbaum übergeben werden, ohne Props durch jede Komponente weiterreichen zu müssen.

const value = useContext(MyContext);

useReducer- Wird für komplexere State-Logik verwendet. Er nimmt eine Reducer-Funktion und einen initialen State entgegen und gibt dann den aktuellen State sowie eine Dispatch-Funktion zum Auslösen von Aktionen zurück.

const [state, dispatch] = useReducer(reducer, initialState);

useCallback- Wird verwendet, um eine memoisierte Version einer Callback-Funktion zurückzugeben, um unnötige Renderings zu verhindern.

const memoizedCallback = useCallback(
  () => {
    // 回调函数体
  },
  [dependencies] // 依赖数组
);

useMemo- Wird verwendet, um Berechnungsergebnisse zu memoisieren, wodurch wiederholte Berechnungen bei jedem Render vermieden werden.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useRef- Wird verwendet, um Referenzen auf DOM-Elemente oder Werte zu erstellen, die den State zwischen Renders beibehalten können.

const refContainer = useRef(initialValue);

useImperativeHandle- Wird verwendet, um DOM-Elementmethoden verfügbar zu machen, wenn Refs verwendet werden.

useImperativeHandle(ref, () => ({
  // 暴露的方法
}));
useLayoutEffect - 与 useEffect 类似，但它在所有的 DOM 变更之后同步执行。这在需要读取 DOM 布局并同步触发重渲染时非常有用。

useLayoutEffect(() => {
  // 副作用操作
}, [dependencies]);

useDebugValue- Wird verwendet, um eine Beschriftung für benutzerdefinierte Hooks in den React Developer Tools anzuzeigen.

useDebugValue(value);

3. Vorteile der Verwendung von React Hooks

  • Prägnantere Komponentenlogik: Keine Notwendigkeit, Klassenkomponenten zu schreiben; Sie können Funktionskomponenten und Hooks verwenden, um Zustand und Lebenszyklus zu verwalten.
  • Verbesserte Wiederverwendbarkeit von Code: Hooks können Ihnen helfen, Logik in wiederverwendbare Funktionen auszulagern und doppelten Code zu reduzieren.
  • Bessere Performance-Optimierung: Verwenden SieuseEffect, useCallback, useMemound andere Hooks, um Seiteneffekte und Performancekosten präziser zu steuern.

4. Hinweise

  • Hooks nur auf oberster Ebene verwenden: Rufen Sie Hooks nicht in Schleifen, Bedingungen oder verschachtelten Funktionen auf. Stellen Sie sicher, dass Hooks bei jedem Rendern in derselben Reihenfolge aufgerufen werden.
  • ESLint-Plugin verwenden: React stellt offiziell das Plugin eslint-plugin-react-hooks bereit, um Ihnen zu helfen zu prüfen, ob Hooks korrekt verwendet werden.

5. Beispiel

Das Folgende ist ein Beispiel, das mehrere React Hooks verwendet:

Beispiel

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

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Sie haben ${count} Mal geklickt`;
  }, [count]); // Aktualisiere den Titel nur, wenn sich count ändert

  return (
    <div>
      <p>Sie haben {count} Mal geklickt</p>
      <button onClick={() => setCount(count + 1)}>Klick mich</button>
    </div>
  );
}

export default Example;

Im obigen Code haben wir useState verwendet, um den count-Status zu verwalten, useEffect, um den Seitentitel zu aktualisieren, und eine einfache Schaltfläche, um count zu erhöhen.

Mit Hooks können Sie saubereren und wiederverwendbareren Komponentencode schreiben.

Hooks erleichtern auch das Testen der Komponentenlogik, da Sie die Logik jedes Hooks einzeln testen können, ohne ihn in eine Komponente zu verpacken.

Darüber hinaus unterstützen Hooks die Anpassung. Sie können Ihre eigenen Hooks schreiben, um komplexe Logik zu kapseln und sie dann in mehreren Komponenten wiederzuverwenden.

Andere Erweiterungen