Reagieren Sie auf Hooks

React Hooks sind Funktionen, die es Ihnen ermöglichen, Status- und andere React-Funktionen in Funktionskomponenten zu verwenden, die traditionell nur in Klassenkomponenten verfügbar waren. Sie wurden in React 16.8 eingeführt und sind seitdem zum Standard für das Schreiben von React-Komponenten geworden. Hier ist eine Aufschlüsselung der am häufigsten verwendeten Haken:

1. useState

• Zweck: Verwaltet den Zustand in Funktionskomponenten.
• Verwendung:

  import React, { useState } from 'react';

  function Counter() {
    const [count, setCount] = useState(0); // Declare a state variable called 'count'

    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
          Click me
        </button>
      </div>
    );
  }

• Erklärung: useState gibt ein Array mit zwei Elementen zurück: dem aktuellen Statuswert (count) und einer Funktion zu dessen Aktualisierung (setCount). Dadurch können Sie den Status innerhalb einer Funktionskomponente beibehalten und aktualisieren.

2. useEffect

• Zweck: Behandelt Nebenwirkungen wie das Abrufen von Daten, Abonnements oder das manuelle Ändern des DOM in Funktionskomponenten.
• Verwendung:

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

  function Example() {
    const [data, setData] = useState(null);

    useEffect(() => {
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => setData(data));
    }, []); // Empty dependency array means this effect runs once after the initial render.

    return <div>{data ? data : 'Loading...'}</div>;
  }

• Erklärung: useEffect benötigt zwei Argumente: eine Funktion zum Ausführen des Effekts und ein optionales Abhängigkeitsarray. Die Effektfunktion wird nach dem Rendern der Komponente ausgeführt. Wenn Sie ein Abhängigkeitsarray bereitstellen, wird der Effekt nur ausgeführt, wenn sich diese Abhängigkeiten ändern.

3. useContext

• Zweck: Greift auf den Wert eines Kontexts innerhalb einer Funktionskomponente zu.
• Verwendung:

  import React, { useContext } from 'react';
  const ThemeContext = React.createContext('light');

  function DisplayTheme() {
    const theme = useContext(ThemeContext); // Access the current theme context value

    return <div>The current theme is {theme}</div>;
  }

• Erklärung: Mit useContext können Sie Kontextwerte direkt in Funktionskomponenten konsumieren, ohne dass eine Consumer-Komponente erforderlich ist.

4. useReducer

• Zweck: Verwaltet komplexe Zustandslogik in Funktionskomponenten und fungiert als Alternative zu useState.
• Verwendung:

  import React, { useReducer } from 'react';

  function reducer(state, action) {
    switch (action.type) {
      case 'increment':
        return { count: state.count + 1 };
      case 'decrement':
        return { count: state.count - 1 };
      default:
        return state;
    }
  }

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

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

• Erklärung: useReducer ist nützlich für die Statusverwaltung, die von komplexerer Logik oder mehreren Aktionen abhängt. Es nimmt eine Reduzierfunktion und einen Anfangszustand an und gibt den aktuellen Zustand und eine Versandfunktion zurück.

5. useRef

• Zweck: Greift auf einen veränderlichen Verweis auf ein DOM-Element oder einen DOM-Wert zu und speichert ihn, der über alle Renderings hinweg bestehen bleibt.
• Verwendung:

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

  function TextInputWithFocusButton() {
    const inputEl = useRef(null);

    const onButtonClick = () => {
      inputEl.current.focus(); // Access the DOM element directly
    };

    return (
      <>
        <input ref={inputEl} type="text" />
        <button onClick={onButtonClick}>Focus the input</button>
      </>
    );
  }

• Erklärung: useRef gibt ein veränderbares Objekt mit einer .current-Eigenschaft zurück, das einen Wert oder eine Referenz auf ein DOM-Element enthalten kann. Dieser Wert bleibt über alle Renderings hinweg bestehen, ohne dass bei der Aktualisierung erneute Renderings ausgelöst werden.

6. useMemo und useCallback

• Zweck: Optimieren Sie die Leistung, indem Sie sich teure Berechnungen oder Funktionen merken.
• Verwendung:

  import React, { useMemo, useCallback } from 'react';

  function Example({ items }) {
    const expensiveCalculation = useMemo(() => {
      return items.reduce((a, b) => a + b, 0);
    }, [items]);

    const memoizedCallback = useCallback(() => {
      console.log('This function is memoized');
    }, []);

    return <div>{expensiveCalculation}</div>;
  }

• Erklärung: useMemo speichert einen berechneten Wert und berechnet ihn nur dann neu, wenn sich seine Abhängigkeiten ändern. useCallback speichert eine Funktion und stellt sicher, dass sie nur dann neu definiert wird, wenn sich ihre Abhängigkeiten ändern.

Warum Haken nützlich sind

• Saubererer Code: Mit Hooks können Sie saubereren, besser lesbaren Code schreiben, ohne dass Klassenkomponenten erforderlich sind.
• Wiederverwendbarkeit: Hooks können über verschiedene Komponenten hinweg wiederverwendet oder sogar zwischen Projekten geteilt werden.
• Zustandsbehaftete Logik in Funktionskomponenten: Mit Hooks können Sie Status- und Nebeneffekte in Funktionskomponenten verwalten, sodass diese genauso leistungsfähig sind wie Klassenkomponenten.

Hooks haben die Art und Weise, wie Entwickler React-Anwendungen schreiben, verändert und funktionale Komponenten leistungsfähiger und einfacher zu verwalten gemacht.

Das obige ist der detaillierte Inhalt vonReagieren Sie auf Hooks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!