Häufige Anwendungsszenarien für React Hooks (Zusammenfassung)

Vorwort

React hat die neue Funktion React Hooks in Version v16.8 eingeführt. Meiner Meinung nach hat die Verwendung von React Hooks folgende Vorteile gegenüber bisherigen Klassenkomponenten:

• Der Code ist besser lesbar. Die Codelogik derselben Funktion war ursprünglich in verschiedene Lebenszyklusfunktionen aufgeteilt, was die Wartung und Iteration für Entwickler erschwerte. React Hooks können die Funktionscodes aggregieren, um das Lesen und Warten zu erleichtern.
• Der Komponentenbaum wird flacher. Im Originalcode verwenden wir häufig HOC/Render-Requisiten, um Komponentenzustände wiederzuverwenden, Funktionen zu verbessern usw., was zweifellos die Anzahl der Komponentenbaumebenen und das Rendering erhöht. In React Hooks können diese Funktionen durch leistungsstarke benutzerdefinierte Hooks erreicht werden.

In diesem Artikel geben wir auf Nutzungsszenarien basierende Beispiele, die Ihnen helfen sollen, die meisten Funktionen von React Hooks zu verstehen und gekonnt einzusetzen.

Die GitHub-Adresse des Blogs lautet: https://github.com/fengshi123/blog

1. Staatshaken

1. Grundlegende Verwendung

Funktion Status(){
  const [Anzahl, Anzahl festlegen] = useState(0);
  zurückkehren (
      <div>
          <p>Sie haben {count} Mal geklickt</p>
          <button bei Klick={() => setzeAnzahl(Anzahl + 1)}>
              Klick mich
          </button>
      </div>
  )
}

2. Aktualisierung

Es gibt zwei Möglichkeiten zum Aktualisieren: Direktes Update und Funktionsupdate. Die Unterschiede in ihren Anwendungsszenarien sind:

• Aktualisieren Sie den Wert direkt, der nicht vom alten Status abhängt.
• Funktionale Updates hängen vom Wert des alten Zustands ab;

// setState(newCount) direkt aktualisieren;

// Funktionales Update setState(prevCount => prevCount - 1);

3. Die Fusion realisieren

Im Gegensatz zur Methode setState in Klassenkomponenten führt useState das aktualisierte Objekt nicht automatisch zusammen, sondern ersetzt es direkt. Wir können die Funktion „setState“ in Kombination mit dem Spread-Operator verwenden, um den Effekt des Zusammenführens und Aktualisierens von Objekten zu erzielen.

setState(vorherigerState => {
  // Sie können auch Object.assign verwenden
  return {...vorherigerZustand, ...aktualisierteWerte};
});

4. Fauler Initialisierungszustand

Der Parameter „initialState“ wirkt sich nur auf die erste Darstellung der Komponente aus und wird bei nachfolgenden Darstellungen ignoriert. Das Anwendungsszenario ist: Wenn das Erstellen des Anfangszustands teuer ist, z. B. wenn er durch komplexe Berechnungen erreicht werden muss, können Sie eine Funktion übergeben, um den Anfangszustand zu berechnen und in der Funktion zurückzugeben. Diese Funktion wird nur während des anfänglichen Renderns aufgerufen:

const [Zustand, setzeZustand] = useState(() => {
  const initialState = someExpensiveComputation(props);
  gib den Anfangszustand zurück;
});

5. Einige wichtige Punkte

(1) Im Gegensatz zu this.setState in einer Klasse aktualisiert Hook eine Statusvariable, indem er sie immer ersetzt, anstatt sie zusammenzuführen.
(2) Es wird empfohlen, mehrere Zustandsvariablen anstelle einer einzigen Zustandsvariablen zu verwenden, da die Zustandsersetzungslogik keine Zusammenführungslogik ist und der nachfolgenden Extraktion der verwandten Zustandslogik förderlich ist.
(3) Wenn die Aktualisierungsfunktion des State Hook aufgerufen und der aktuelle Status übergeben wird, überspringt React das Rendern der untergeordneten Komponente und die Ausführung des Effekts. (React verwendet den Vergleichsalgorithmus Object.is, um den Status zu vergleichen.)

Effekthaken

1. Grundlegende Verwendung

Funktion Wirkung(){
  const [Anzahl, Anzahl festlegen] = useState(0);
  useEffect(() => {
    console.log(`Sie haben ${count} Mal geklickt`);
  });

  zurückkehren (
      <div>
          <p>Sie haben {count} Mal geklickt</p>
          <button bei Klick={() => setzeAnzahl(Anzahl + 1)}>
              Klick mich
          </button>
      </div>
  )
}

2. Klare Bedienung

Um Speicherlecks zu vermeiden, wird die Bereinigungsfunktion ausgeführt, bevor die Komponente deinstalliert wird. Wenn die Komponente mehrmals gerendert wird (normalerweise der Fall), wird der vorherige Effekt gelöscht, bevor der nächste Effekt ausgeführt wird, d. h. zuerst wird die Rückgabefunktion im vorherigen Effekt ausgeführt und dann die Nichtrückgabefunktion in diesem Effekt.

useEffect(() => {
  const-Abonnement = props.source.subscribe();
  zurückgeben () => {
    //Abonnement löschen subscription.unsubscribe();
  };
});

3. Ausführungsfrist

Im Gegensatz zu componentDidMount oder componentDidUpdate blockieren mit useEffect geplante Effekte nicht die Bildschirmaktualisierung des Browsers, wodurch Ihre App reaktionsschneller aussieht. (componentDidMount oder componentDidUpdate blockieren die Bildschirmaktualisierung des Browsers.)

4. Leistungsoptimierung

Standardmäßig verzögert React den Aufruf des Effekts jedes Mal, wenn es darauf wartet, dass der Browser mit dem Rendern des Bildschirms fertig ist. Wenn sich jedoch zwischen zwei erneuten Renderings bestimmte Werte nicht geändert haben, können Sie React anweisen, den Aufruf des Effekts zu überspringen, indem Sie ein Array als zweiten optionalen Parameter von useEffect übergeben: Wie unten gezeigt, wird der Effekt nach dem zweiten Rendering übersprungen, wenn sich der Zählwert zwischen zwei Renderings nicht geändert hat.

useEffect(() => {
  document.title = `Sie haben ${count} Mal geklickt`;
}, [Anzahl]); // Nur aktualisieren, wenn sich die Anzahl ändert

5. Simulieren Sie componentDidMount

Wenn Sie den Effekt nur einmal ausführen möchten (nur wenn die Komponente gemountet und unmountet wird), können Sie als zweiten Parameter ein leeres Array ([]) übergeben, wie unten gezeigt. Das Prinzip ist das gleiche wie in Punkt 4 Leistungsoptimierung beschrieben;

useEffect(() => {
  .....
}, []);

6. Bewährte Vorgehensweisen

Es kann schwierig sein, sich zu merken, welche Eigenschaften und Zustände eine Funktion außerhalb eines Effekts verwendet. Aus diesem Grund möchten Sie die benötigten Funktionen normalerweise innerhalb eines Effekts deklarieren.

// schlechte, nicht empfohlene Funktion Example({ someProp }) {
  Funktion tuEtwas() {
    console.log(irgendeineEigenschaft);
  }

  useEffect(() => {
    tuEtwas();
  }, []); // 🔴 Dies ist unsicher (es ruft „doSomething“ auf, das „someProp“ verwendet)
}

// gute, empfehlenswerte Funktion Example({ someProp }) {
  useEffect(() => {
    Funktion tuEtwas() {
      console.log(irgendeineEigenschaft);
    }

    tuEtwas();
  }, [someProp]); // ✅ Sicher (unser Effekt verwendet nur „someProp“)
}

Wenn Sie aus irgendeinem Grund eine Funktion nicht in einen Effekt verschieben können, gibt es einige andere Optionen:

• Sie könnten versuchen, diese Funktion außerhalb Ihrer Komponente zu verschieben. Auf diese Weise ist die Funktion definitiv nicht von irgendwelchen Eigenschaften oder Zuständen abhängig und muss nicht in der Abhängigkeitsliste erscheinen.
• Als letzten Ausweg können Sie die Funktion als Effektabhängigkeit hinzufügen, ihre Definition jedoch in den useCallback-Hook einschließen. Dadurch wird sichergestellt, dass es sich nicht über mehrere Renderings hinweg ändert, sofern sich nicht seine eigenen Abhängigkeiten ändern.

Es wird empfohlen, die Exhaustive-Deps-Regel in eslint-plugin-react-hooks zu aktivieren, die beim Hinzufügen falscher Abhängigkeiten Warnungen ausgibt und Reparaturvorschläge liefert.

// 1. Installieren Sie das Plugin npm i eslint-plugin-react-hooks --save-dev

// 2. eslint-Konfiguration {
  "Plugins": [
    // ...
    "Reaktionshaken"
  ],
  "Regeln": {
    // ...
    "react-hooks/rules-of-hooks": "Fehler",
    "react-hooks/exhaustive-deps": "warnen"
  }
}

7. Einige wichtige Punkte

(1) Der useEffect-Hook kann als Kombination aus componentDidMount, componentDidUpdate und componentWillUnmount betrachtet werden.
(2) In der Klassenkomponente von React sollte die Renderfunktion keine Nebenwirkungen haben. Im Allgemeinen ist es hier zu früh, Operationen durchzuführen, und wir möchten unsere Operationen grundsätzlich durchführen, nachdem React das DOM aktualisiert hat.

3. useContext

Eine Methode zur Handhabung mehrstufiger Datenübertragung. Wenn im vorherigen Komponentenbaum eine stufenübergreifende Vorgängerkomponente Daten an eine untergeordnete Komponente übergeben möchte, können wir zusätzlich zur stufenweisen Weitergabe von Eigenschaften auch die React Context API verwenden, um dies zu tun. Die Anwendungsbeispiele sind wie folgt: (1) Verwenden Sie die React Context API, um einen Context außerhalb der Komponente zu erstellen

importiere React von „react“;
const ThemeContext = React.createContext(0);
Standard-ThemeContext exportieren;

(2) Verwenden Sie Context.Provider, um ein Context-Objekt bereitzustellen, das von untergeordneten Komponenten gemeinsam genutzt werden kann

importiere React, { useState } von 'react';
importiere ThemeContext aus „./ThemeContext“;
importiere ContextComponent1 aus './ContextComponent1';

Funktion Kontextseite () {
  const [Anzahl, Anzahl festlegen] = useState(1);
  zurückkehren (
    <div Klassenname="App">
      <ThemeContext.Provider-Wert={Anzahl}>
        <Kontextkomponente1 />
      </ThemeContext.Provider>
      <button bei Klick={() => setzeAnzahl(Anzahl + 1)}>
              Klick mich
      </button>
    </div>
  );
}

Standard-Kontextseite exportieren;

(3) Die Hook-Funktion useContext () wird verwendet, um das Context-Objekt einzuführen und seinen Wert abzurufen

// Unterkomponente, verwende untergeordnete Komponente in Unterkomponente, importiere React von „react“;
importiere ContextComponent2 aus „./ContextComponent2“;
Funktion Kontextkomponente () {
  zurückkehren (
    <Kontextkomponente2 />
  );
}
Standard-Kontextkomponente exportieren;


// Enkelkomponente, verwende den Context-Objektwert in der Enkelkomponente importiere React, { useContext } from 'react';
importiere ThemeContext aus „./ThemeContext“;
Funktion Kontextkomponente () {
  konstanter Wert = useContext(ThemeContext);
  zurückkehren (
    <div>useContext:{Wert}</div>
  );
}
Standard-Kontextkomponente exportieren;

4. useReducer

1. Grundlegende Verwendung

Szenarien, in denen useState besser geeignet ist: beispielsweise wenn die Verarbeitung der Zustandslogik komplex ist und mehrere Unterwerte enthält oder wenn der nächste Zustand vom vorherigen Zustand abhängt; Beispiele sind unten aufgeführt.

importiere React, { useReducer } von 'react';
Schnittstelle Zustandstyp {
  Anzahl: Nummer
}
Schnittstelle Aktionstyp {
  Typ: Zeichenfolge
}
const initialState = { Anzahl: 0 };
const Reducer = (Zustand:Zustandstyp, Aktion:Aktionstyp) => {
  Schalter (Aktion.Typ) {
    Fall 'Inkrement':
      return { Anzahl: Zustand.Anzahl + 1 };
    Fall 'Dekrement':
      return { Anzahl: Zustand.Anzahl - 1 };
    Standard:
      neuen Fehler werfen();
  }
};
const UseReducer = () => {
  const [Status, Versand] = useReducer(Reducer, Anfangsstatus);

  zurückkehren (
    <div Klassenname="App">
      <div>useReducer-Anzahl:{state.count}</div>
      <button onClick={() => { dispatch({ Typ: 'decrement' }); }}>useReducer reduzieren</button>
      <button onClick={() => { dispatch({ type: 'increment' }); }}>useReducer erhöhen</button>
    </div>
  );
};

Standardmäßig UseReducer exportieren;

2. Verzögerte Initialisierung des Status

Schnittstelle Zustandstyp {
  Anzahl: Nummer
}
Schnittstelle Aktionstyp {
  Typ: Zeichenfolge,
  Paylod?: Nummer
}
Konstante initCount = 0 
const init = (initCount:Zahl)=>{
  Rückgabewert {Anzahl:initCount}
}
const Reducer = (Zustand:Zustandstyp, Aktion:Aktionstyp)=>{
  Schalter(Aktion.Typ){
    Fall 'Inkrement':
      return {Anzahl: Zustand.Anzahl + 1}
    Fall 'Dekrement':
      return {Anzahl: Zustand.Anzahl - 1}
    Fall 'Zurücksetzen':
      Rückgabe init(Aktion.paylod || 0)
    Standard:
      neuen Fehler werfen();
  }
}
const UseReducer = () => {
  const [Status, Versand] = useReducer(Reducer, InitCount, Init)

  zurückkehren (
    <div Klassenname="App">
      <div>useReducer-Anzahl:{state.count}</div>
      <button onClick={()=>{dispatch({type:'decrement'})}}>useReducer reduzieren</button>
      <button onClick={()=>{dispatch({type:'increment'})}}>useReducer erhöhen</button>
      <button onClick={()=>{dispatch({type:'reset',paylod:10 })}}>useReducer hinzufügen</button>
    </div>
  );
}
Standardmäßig UseReducer exportieren;

5. Notiz

Wie unten gezeigt, wird beim erneuten Rendern der übergeordneten Komponente auch die untergeordnete Komponente erneut gerendert, selbst wenn sich die Eigenschaften und der Status der untergeordneten Komponente nicht geändert haben.
importiere React, {memo, useState} von „react“;

// Untergeordnete Komponente const ChildComp = () => {
  console.log('Untergeordnete Komponente...');
  Rückgabewert (<div>Untergeordnete Komp....</div>);
};

// Übergeordnete Komponente const Parent = () => {
  const [Anzahl, Anzahl festlegen] = useState(0);

  zurückkehren (
    <div Klassenname="App">
      <div>Hallo Welt {count}</div>
      <div onClick={() => { setCount(count => count + 1); }}>Zum Vergrößern klicken</div>
      <UntergeordneteKomponente/>
    </div>
  );
};

Standard-Übergeordnetes Element exportieren;

Verbesserung: Wir können das Memo-Paket verwenden, um das obige Problem zu lösen. Dies löst jedoch nur die Situation, in der die übergeordnete Komponente keine Parameter an die untergeordnete Komponente übergibt und die übergeordnete Komponente einfache Typparameter an die untergeordnete Komponente übergibt (z. B. Zeichenfolge, Zahl, Boolescher Wert usw.). Wenn komplexe Eigenschaften übergeben werden, sollten useCallback (Rückrufereignis) oder useMemo (komplexe Eigenschaften) verwendet werden.

// Untergeordnete Komponente const ChildComp = () => {
  console.log('Untergeordnete Komponente...');
  Rückgabewert (<div>Untergeordnete Komp....</div>);
};

const MemoChildComp = memo(ChildComp);

6. useMemo

Nehmen wir das folgende Szenario an: Die übergeordnete Komponente übergibt die Infoobjekteigenschaft beim Aufruf der untergeordneten Komponente. Wenn auf die Schaltfläche der übergeordneten Komponente geklickt wird, gibt die Konsole die Informationen über die gerenderte untergeordnete Komponente aus.

importiere React, {memo, useState} von „react“;

// Untergeordnete Komponente const ChildComp = (info:{info:{name: string, age: number}}) => {
  console.log('Untergeordnete Komponente...');
  Rückgabewert (<div>Untergeordnete Komp....</div>);
};

const MemoChildComp = memo(ChildComp);

// Übergeordnete Komponente const Parent = () => {
  const [Anzahl, Anzahl festlegen] = useState(0);
  const [name] = useState('jack');
  const [Alter] = useState(11);
  const info = {Name, Alter};

  zurückkehren (
    <div Klassenname="App">
      <div>Hallo Welt {count}</div>
      <div onClick={() => { setCount(count => count + 1); }}>Zum Vergrößern klicken</div>
      <MemoChildComp info={info}/>
    </div>
  );
};

Standard-Übergeordnetes Element exportieren;

Analyse der Gründe:

• Klicken Sie auf die Schaltfläche der übergeordneten Komponente, um die erneute Darstellung der übergeordneten Komponente auszulösen.
• Wenn die übergeordnete Komponente gerendert wird, wird mit der Zeile const info = { name, age } ein neues Objekt generiert, wodurch sich der Wert der an die untergeordnete Komponente übergebenen Info-Eigenschaft ändert, was wiederum dazu führt, dass die untergeordnete Komponente erneut gerendert wird.

lösen:

Verwenden Sie useMemo, um die Objektattribute zu umschließen. useMemo hat zwei Parameter:

• Der erste Parameter ist eine Funktion, das zurückgegebene Objekt zeigt auf dieselbe Referenz und es wird kein neues Objekt erstellt.
• Der zweite Parameter ist ein Array. Die Funktion des ersten Parameters gibt nur dann ein neues Objekt zurück, wenn sich die Variablen im Array ändern.

importiere React, {memo, useMemo, useState} von „react“;

// Untergeordnete Komponente const ChildComp = (info:{info:{name: string, age: number}}) => {
  console.log('Untergeordnete Komponente...');
  Rückgabewert (<div>Untergeordnete Komp....</div>);
};

const MemoChildComp = memo(ChildComp);

// Übergeordnete Komponente const Parent = () => {
  const [Anzahl, Anzahl festlegen] = useState(0);
  const [name] = useState('jack');
  const [Alter] = useState(11);
  
  // Verwenden Sie useMemo, um Objekteigenschaften zu umschließen const info = useMemo(() => ({ name, age }), [name, age]);

  zurückkehren (
    <div Klassenname="App">
      <div>Hallo Welt {count}</div>
      <div onClick={() => { setCount(count => count + 1); }}>Zum Vergrößern klicken</div>
      <MemoChildComp info={info}/>
    </div>
  );
};

Standard-Übergeordnetes Element exportieren;

7. useCallback

Fahren wir mit dem Beispiel aus Kapitel 6 fort und nehmen an, dass Sie das Ereignis an die untergeordnete Komponente weitergeben müssen, wie unten gezeigt. Wenn Sie auf die Schaltfläche der übergeordneten Komponente klicken, werden Sie feststellen, dass die Konsole Informationen über die gerenderte untergeordnete Komponente ausgibt, die darauf hinweisen, dass die untergeordnete Komponente erneut gerendert wurde.

importiere React, {memo, useMemo, useState} von „react“;

// Untergeordnete Komponente const ChildComp = (props:any) => {
  console.log('Untergeordnete Komponente...');
  Rückgabewert (<div>Untergeordnete Komp....</div>);
};

const MemoChildComp = memo(ChildComp);

// Übergeordnete Komponente const Parent = () => {
  const [Anzahl, Anzahl festlegen] = useState(0);
  const [name] = useState('jack');
  const [Alter] = useState(11);
  const info = useMemo(() => ({ Name, Alter }), [Name, Alter]);
  const changeName = () => {
    console.log('Ausgabename...');
  };

  zurückkehren (
    <div Klassenname="App">
      <div>Hallo Welt {count}</div>
      <div onClick={() => { setCount(count => count + 1); }}>Zum Vergrößern klicken</div>
      <MemoChildComp info={info} changeName={changeName}/>
    </div>
  );
};

Standard-Übergeordnetes Element exportieren;

Analysieren Sie die Gründe:

• Durch Klicken auf die Schaltfläche der übergeordneten Komponente wird der Wert der Zählvariable in der übergeordneten Komponente geändert (der Statuswert der übergeordneten Komponente), was wiederum dazu führt, dass die übergeordnete Komponente erneut gerendert wird.
• Wenn die übergeordnete Komponente erneut gerendert wird, wird die Funktion changeName neu erstellt, d. h. die an die untergeordnete Komponente übergebene Eigenschaft changeName hat sich geändert, wodurch die untergeordnete Komponente gerendert wird.

lösen:
Ändern Sie die Methode changeName der übergeordneten Komponente und umschließen Sie sie mit einer useCallback-Hook-Funktion. Der useCallback-Parameter ist ähnlich wie useMemo.

importiere React, { Memo, useCallback, useMemo, useState } von „react“;

// Untergeordnete Komponente const ChildComp = (props:any) => {
  console.log('Untergeordnete Komponente...');
  Rückgabewert (<div>Untergeordnete Komp....</div>);
};

const MemoChildComp = memo(ChildComp);

// Übergeordnete Komponente const Parent = () => {
  const [Anzahl, Anzahl festlegen] = useState(0);
  const [name] = useState('jack');
  const [Alter] = useState(11);
  const info = useMemo(() => ({ Name, Alter }), [Name, Alter]);
  const changeName = useCallback(() => {
    console.log('Ausgabename...');
  }, []);

  zurückkehren (
    <div Klassenname="App">
      <div>Hallo Welt {count}</div>
      <div onClick={() => { setCount(count => count + 1); }}>Zum Vergrößern klicken</div>
      <MemoChildComp info={info} changeName={changeName}/>
    </div>
  );
};

Standard-Übergeordnetes Element exportieren;

8. useRef

Im Folgenden sind zwei Verwendungsszenarien von useRef aufgeführt:

1. Auf DOM-Element zeigen

Wie unten gezeigt, verweist eine mit useRef erstellte Variable auf ein Eingabeelement und fokussiert die Eingabe, nachdem die Seite gerendert wurde:

importiere React, { useRef, useEffect } von „react“;
const Seite1 = () => {
  const myRef = useRef<HTMLInputElement>(null);
  useEffect(() => {
    meineRef?.current?.focus();
  });
  zurückkehren (
    <div>
      <span>UseRef:</span>
      <input ref={myRef} type="text"/>
    </div>
  );
};

Standardseite1 exportieren;

2. Variablen speichern

Die Rolle von useRef im React-Hook ist, wie es auf der offiziellen Website heißt, wie eine Variable, ähnlich wie diese hier: Es ist wie eine Box, in der Sie alles speichern können. createRef gibt bei jedem Rendern eine neue Referenz zurück, während useRef jedes Mal dieselbe Referenz zurückgibt, wie im folgenden Beispiel gezeigt:

importiere React, { useRef, useEffect, useState } von „react“;
const Seite1 = () => {
    const myRef2 = useRef(0);
    const [Anzahl, Anzahl festlegen] = useState(0)
    Effekt verwenden(()=>{
      myRef2.current = Anzahl;
    });
    Funktion handleClick(){
      setzeTimeout(()=>{
        console.log(Anzahl); // 3
        console.log(myRef2.current); // 6
      },3000)
    }
    zurückkehren (
    <div>
      <div onClick={()=> setCount(count+1)}>Anzahl der Klicks</div>
      <div onClick={()=> handleClick()}>Anzeigen</div>
    </div>
    );
}

Standardseite1 exportieren;

9. useImperativeHandle

Anwendungsszenario: Der gesamte DOM-Knoten wird über ref abgerufen, und useImperativeHandle kann verwendet werden, um die Anzeige nur einiger Methoden und Eigenschaften anstelle des gesamten DOM-Knotens zu steuern.

10. useLayoutEffect

Seine Funktionssignatur ist dieselbe wie bei useEffect, aber es ruft den Effekt synchron nach allen DOM-Änderungen auf, deshalb wird es hier nicht angezeigt.

useLayoutEffect wird gleichzeitig mit componentDidMount und componentDidUpdate der Klassenkomponente ausgeführt, die Sie normalerweise schreiben.
useEffect startet nach Abschluss der Aktualisierung, d. h. nachdem die Methode in Punkt 1 ausgeführt wurde, eine weitere Aufgabenplanung und führt useEffect bei der nächsten Aufgabenplanung aus.

Zusammenfassen

In diesem Artikel geben wir auf Nutzungsszenarien basierende Beispiele und hoffen, Ihnen dabei zu helfen, die meisten Funktionen von React Hooks zu verstehen und gekonnt einzusetzen.

Damit ist dieser Artikel über die Verwendung gängiger Szenarien von React Hooks (Zusammenfassung) abgeschlossen. Weitere Inhalte zu gängigen Szenarien von React Hooks finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!