Snippet

Auslagern von wiederverwendbarem State in ein Custom-Hook-Muster

Das Custom-Hook-Entwurfsmuster lagert zustandsbehaftete Komponentenlogik in wiederverwendbare Funktionen aus, die mit dem Präfix 'use' beginnen. Diese Trennung von Zuständigkeiten ermöglicht es mehreren Komponenten, Zustandslogik zu teilen, ohne Code zu duplizieren.

snippet.js

javascript

import { useState } from 'react';
 
function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);
  const increment = () => setCount(prev => prev + 1);
  const reset = () => setCount(initialValue);
  return { count, increment, reset };
}
 
export default useCounter;

react

Erklärung

function useCounter(initialValue = 0) {

Definiert einen benutzerdefinierten Hook gemäß den Standard-Namenskonventionen mit einem Initialwert-Parameter.

const [count, setCount] = useState(initialValue);

Verwaltet den gekapselten numerischen Zustand innerhalb der Hook-Instanz.

const increment = () => setCount(prev => prev + 1);

Kapselt die Zustandsänderungslogik in einer wiederverwendbaren Hilfsfunktion.

return { count, increment, reset };

Gibt Zustandsdaten und Aktualisierungsfunktionen gebündelt in einem einfachen Objekt zurück.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Anfänger →

Auslagern von wiederverwendbarem State in ein Custom-Hook-Muster

Verwandt