Praktikantenebene: Lebenszyklusmethoden und Hooks in React

Einführung in React Hooks

React Hooks sind Funktionen, mit denen Sie Status- und andere React-Funktionen in Funktionskomponenten verwenden können. Vor Hooks war zustandsbehaftete Logik nur in Klassenkomponenten verfügbar. Hooks bieten eine direktere API für die React-Konzepte, die Sie bereits kennen, wie z. B. Status, Lebenszyklusmethoden und Kontext.

Schlüsselhaken in React

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 wird verwendet, um den Status zu aktualisieren, 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