Advanced React Hooks: Usereducer, Usecontext und benutzerdefinierte Hooks

Der Usereducer ist ideal für eine komplexe Zustandslogik mit vorhersehbaren Übergängen unter Verwendung von Aktionen und einer Reduzierfunktion. 2. Usecontext eliminiert Prop -Bohrungen, indem er den Zugriff auf gemeinsam genutzten Zustand im Komponentenbaum ermöglicht, wenn er mit einem Anbieter gepaart wird. 3.. Benutzerdefinierte Haken wie Usefetch -Kapiteller und Wiederverwendung der Logik über Komponenten hinweg und fördern Sie sauberen, aufhaltbaren Code. Zusammen bieten diese fortgeschrittenen Hooks eine skalierbare staatliche Verwaltung und logische Wiederverwendung ohne externe Bibliotheken.

Wenn Sie die Grundlagen von React gemeistert haben - useState , useEffect und den Komponentenlebenszyklus - ist es Zeit, sich zu verbessern. Fortgeschrittene Hooks wie useReducer , useContext und benutzerdefinierte Hooks helfen Ihnen bei der Verwaltung komplexer Zustandslogik, teilen den Status über Komponenten hinweg und halten Ihren Code sauber und wiederverwendbar. Lassen Sie uns aufschlüsseln, wie und wann Sie sie effektiv verwenden müssen.

1. Userducer: Verwaltung der komplexen Zustandslogik

useState eignet sich hervorragend für einen einfachen Zustand - einen Zähler, einen Umschalter oder eine Formeingabe. Wenn Ihre Zustandslogik jedoch komplexer wird (mehrere Unterwerte, Übergänge auf der Grundlage des vorherigen Zustands oder Aktionen, die von den Bedingungen abhängen), strahlt useReducer .

Es folgt dem Redux -Muster: Sie definieren eine Reduzierfunktion , die den aktuellen Zustand und eine Aktion ausführt, und gibt dann den neuen Zustand zurück.

 const initialState = {count: 0};

Funktion Gegenbekannung (Zustand, Aktion) {
  Switch (action.type) {
    Fall "Inkrement":
      return {count: state.count 1};
    Fall "Dekrement":
      return {count: state.count - 1};
    Fall 'Reset':
      Initialstate zurückgeben;
    Standard:
      Neuen Fehler () werfen;
  }
}

Funktion counter () {
  const [Zustand, Versand] = Userducer (Gegenbekannter, InitialState);

  zurückkehren (
    <div>
      Graf: {state.count}
      <button onclick = {() => Dispatch ({Typ: &#39;Decrement&#39;})}>-</button>
      <button onclick = {() => Dispatch ({Typ: &#39;Increment&#39;})}> </button>
      <button onclick = {() => Dispatch ({type: &#39;reset&#39;})}> reset </button> reset reset
    </div>
  );
}

Warum useReducer verwenden?

• Zentralisiert die Staatslogik an einem Ort.
• Macht Zustandsübergänge vorhersehbar.
• Ideal für Formen, Zauberer oder einen Mehrschritt-UI-Fluss.
• Funktioniert gut mit useContext für den globalen Staat.

TIPP: Sie können auch eine Initialisiererfunktion an useReducer zur faulen Initialisierung des Zustands übergeben.

2. Usecontext: State Sharing State über Komponenten hinweg

Das Abgeben von Requisiten durch mehrere Ebenen (Prop -Bohrungen) wird schnell unordentlich. useContext können Sie überall im Komponentenbaum auf Shared Status zugreifen, ohne die Requisiten manuell zu übergeben.

Kombinieren Sie es mit useReducer um ein leichtes globales staatliches System aufzubauen.

 // Kontext erstellen
const countcontext = react.createContext ();

// Anbieterkomponente
Funktion countProvider ({Kinder}) {
  const [Zustand, Versand] = Usereducer (Gegenbekannter, {count: 0});

  zurückkehren (
    <CountContext.provider value = {{State, Dispatch}}>
      {Kinder}
    </CountContext.Provider>
  );
}

// benutzerdefinierte Haken, um den Kontext zu verwenden (sauberer und sicherer)
Funktion usecount () {
  const context = usecontext (countContext);
  Wenn (! Kontext) neue Fehler werfen (&#39;UseCount muss in countProvider verwendet werden&#39;);
  Kontext zurückgeben;
}

// benutze es tief im Baum
Funktion DeepComponent () {
  const {Status, Dispatch} = useCount ();

  zurückkehren (
    <div>
      <p> count: {state.count} </p>
      <button onclick = {() => Dispatch ({Typ: &#39;Increment&#39;})}> 1 </button>
    </div>
  );
}

// Wickeln Sie Ihre App ein
Funktion App () {
  zurückkehren (
    <CountProvider>
      <Eplescomponent />
    </CountProvider>
  );
}

Best Practices:

• Erstellen Sie immer einen benutzerdefinierten Haken, um useContext zu wickeln - er verhindert Fehler und verbessert die Wiederverwendbarkeit.
• Verwenden Sie für Thema, Auth, Sprache oder einen appweiten Zustand.
• Vermeiden Sie es, es für alles zu überwinden - es ist kein Ersatz für alle staatlichen Managements.

3. Custom Hooks: Logik wiederverwenden, nicht nur die Benutzeroberfläche

Benutzerdefinierte Hooks sind Funktionen, die andere Hooks verwenden, um die Logik zu verkapulieren und wiederzuverwenden. Sie beginnen mit use und befolgen die gleichen Regeln wie reguläre Haken.

Nehmen wir an, Sie holen Daten an mehreren Stellen. Anstatt useState zu wiederholen und useEffect , erstellen Sie useFetch .

 Funktionsnutzung (URL) {
  const [data, setData] = usustate (null);
  const [laden, setloading] = usustate (true);
  const [Fehler, setError] = usustate (null);

  useEffect (() => {
    const fetchdata = async () => {
      versuchen {
        const res = wartet abfang (url);
        const json = warte res.json ();
        setdata (JSON);
      } catch (err) {
        setError (err);
      } Endlich {
        setloading (false);
      }
    };

    fetchdata ();
  }, [url]);

  zurückgeben {Daten, Laden, Fehler};
}

Verwenden Sie es jetzt überall:

 Funktion userProfile ({userID}) {
  const {data, laden, fehler} = nutzfass (`/api/user/$ {userId}`);

  if (laden) return <p> laden ... </p>;
  if (Fehler) return <p> Fehler: {error.message} </p>;

  return <div> {data.name} </div>;
}

Weitere Ideen für benutzerdefinierte Haken:

• useLocalStorage : Synchronisierungsstatus mit localStorage .
• useForm : Formulareingänge, Validierung, Einreichung.
• useOutsideClick : Klicks außerhalb eines Elements erkennen.
• useDebounce : Entdecken Sie Werte oder Rückrufe.

Ein gutes benutzerdefiniertes Haken -Abstracts -Verhalten , nicht nur Zustand. Es sollte eine komplexe Logik einfach zu bedienen machen.

Letzte Gedanken

• useReducer bringt Struktur in komplexe Staatsaktualisierungen.
• useContext eliminiert Prop -Bohrungen und ermöglicht den globalen Zustand (wenn er mit Bedacht verwendet wird).
• Mit benutzerdefinierten Hooks können Sie die Logik über Komponenten extrahieren und wiederverwenden.

Gemeinsam befähigen sie Sie, skalierbare, wartbare React -Apps zu schreiben, ohne sofort nach externen Bibliotheken zu greifen.

Grundsätzlich werden diese Tools, sobald Sie die Grundlagen hinter sich haben, für die Verwaltung der realen Komplexität von entscheidender Bedeutung-sauber und effizient.

Das obige ist der detaillierte Inhalt vonAdvanced React Hooks: Usereducer, Usecontext und benutzerdefinierte Hooks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!