Architektenebene: Lebenszyklusmethoden und Hooks in React

Als Entwickler auf Architekturebene sind Sie dafür verantwortlich, sicherzustellen, dass Ihre Anwendungen robust, wartbar und skalierbar sind. Um diese Ziele zu erreichen, ist die Beherrschung von React Hooks und Lebenszyklusmethoden unerlässlich. In diesem Artikel werden wichtige Hooks, benutzerdefinierte Hooks und erweiterte Hook-Muster behandelt, z. B. die Verwaltung komplexer Zustände mit useReducer und die Optimierung der Leistung mit useMemo und useCallback.

Einführung in React Hooks

React Hooks, eingeführt in React 16.8, ermöglichen Funktionskomponenten die Verwendung von Status- und anderen React-Funktionen. Hooks bieten einen funktionalen und modularen Ansatz für die Handhabung der Komponentenlogik, der zu saubereren und besser wartbaren Codebasen führt.

Hauptvorteile von Haken

1. Saubererer Code: Hooks machen Klassenkomponenten überflüssig, wodurch die Codebasis konsistenter und leichter verständlich wird.
2. Wiederverwendbarkeit:Benutzerdefinierte Hooks ermöglichen die Extraktion und Wiederverwendung von Stateful-Logik über mehrere Komponenten hinweg.
3. Modularität: Hooks bieten eine unkomplizierte API zur Verwaltung des Komponentenstatus und der Nebenwirkungen und fördern so modularen und wartbaren Code.

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 und besonders nützlich, wenn die Zustandslogik mehrere Unterwerte umfasst oder wenn der nächste Zustand vom vorherigen abhängt.

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