Junior-Level: Lebenszyklusmethoden und Hooks in React

React Hooks haben die Art und Weise, wie wir funktionale Komponenten in React schreiben, revolutioniert und es uns ermöglicht, Status- und andere React-Funktionen zu verwenden, ohne eine Klasse zu schreiben. Dieser Leitfaden stellt Ihnen wichtige Hooks, benutzerdefinierte Hooks und erweiterte Hook-Muster vor, um komplexe Zustände zu verwalten und die Leistung zu optimieren.

Einführung in React Hooks

React Hooks sind Funktionen, mit denen Sie React-Status- und Lebenszyklusfunktionen von Funktionskomponenten aus „einbinden“ können. Hooks wurden in React 16.8 eingeführt und bieten eine direktere Möglichkeit, Status- und andere React-Funktionen in Funktionskomponenten zu verwenden.

Hauptvorteile von Haken

1. Einfacherer Code: Mit Hooks können Sie Zustands- und Lebenszyklusmethoden direkt in Funktionskomponenten verwenden, was zu einfacherem und besser lesbarem Code führt.
2. Logik wiederverwenden: Benutzerdefinierte Hooks ermöglichen es Ihnen, zustandsbehaftete Logik über mehrere Komponenten hinweg zu extrahieren und wiederzuverwenden.
3. Erweiterte Funktionskomponenten: Hooks bieten die gesamte Leistungsfähigkeit 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