Mittleres Niveau: Lebenszyklusmethoden und Hooks in React

Als Entwickler mittlerer Ebene ist das Verständnis und die effektive Verwendung von React Hooks und Lebenszyklusmethoden von entscheidender Bedeutung für die Erstellung robuster, wartbarer und skalierbarer Anwendungen. Dieser Artikel befasst sich mit wesentlichen Hooks, benutzerdefinierten Hooks und erweiterten Hook-Mustern, z. B. der Verwaltung komplexer Zustände mit useReducer und der Optimierung der Leistung mit useMemo und useCallback.

Einführung in React Hooks

React Hooks ermöglichen es Ihnen, Status- und andere React-Funktionen zu verwenden, ohne eine Klasse zu schreiben. Hooks wurden in React 16.8 eingeführt und bieten einen einfacheren und funktionaleren Ansatz für Zustandsverwaltung und Lebenszyklusmethoden.

Hauptvorteile von Haken

1. Einfacherer Code: Hooks ermöglichen Ihnen die direkte Verwendung von Status- und Lebenszyklusmethoden in Funktionskomponenten, was zu besser lesbarem und wartbarem Code führt.
2. Logik wiederverwenden: Mit benutzerdefinierten Hooks können Sie zustandsbehaftete Logik über mehrere Komponenten hinweg extrahieren und wiederverwenden.
3. Erweiterte Funktionskomponenten: Hooks bieten alle Funktionen von Klassenkomponenten, wie z. B. die Verwaltung von Status und Nebenwirkungen, ohne dass Klassen verwendet werden müssen.

Unverzichtbare Haken

useState

useState ist ein Hook, mit dem Sie Funktionskomponenten einen Status hinzufügen können.

Beispiel:

import React, { useState } from 'react';

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

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

export default Counter;

In diesem Beispiel initialisiert useState die Count-Statusvariable auf 0. Die setCount-Funktion aktualisiert den Status, wenn auf die Schaltfläche geklickt wird.

useEffect

useEffect ist ein Hook, mit dem Sie Nebeneffekte in Funktionskomponenten ausführen können, z. B. das Abrufen von Daten, die direkte Interaktion mit dem DOM und das Einrichten von Abonnements. Es kombiniert die Funktionalität mehrerer Lebenszyklusmethoden in Klassenkomponenten (componentDidMount, ComponentDidUpdate und ComponentWillUnmount).

Beispiel:

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

const DataFetcher = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data ? <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}

: 'Loading...'}

); }; export default DataFetcher;

Nach dem Login kopieren

In diesem Beispiel ruft useEffect Daten von einer API ab, wenn die Komponente bereitgestellt wird.

useContext

useContext ist ein Hook, mit dem Sie auf den Kontextwert für einen bestimmten Kontext zugreifen können.

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>;
};

export default ThemedComponent;

In diesem Beispiel greift useContext auf den aktuellen Wert von ThemeContext zu.

useReducer

useReducer ist ein Hook, mit dem Sie komplexe Zustandslogik in einer Funktionskomponente verwalten können. Es ist eine Alternative zu useState.

Beispiel:

import React, { useReducer } from 'react';

const initialState = { count: 0 };

const reducer = (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(reducer, initialState);

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

export default Counter;

In diesem Beispiel verwaltet useReducer den Zählstatus mit einer Reduzierfunktion.

Benutzerdefinierte Haken

Mit benutzerdefinierten Hooks können Sie zustandsbehaftete Logik über mehrere Komponenten hinweg wiederverwenden. Ein benutzerdefinierter Hook ist eine Funktion, die integrierte Hooks verwendet.

Beispiel:

import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => setData(data));
  }, [url]);

  return data;
};

const DataFetcher = ({ url }) => {
  const data = useFetch(url);

  return (
    <div>
      {data ? <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}

: 'Loading...'}

); }; export default DataFetcher;

Nach dem Login kopieren