Was ist ein Haken? Lassen Sie uns über zwei häufig verwendete Hooks in React sprechen

So starten Sie schnell mit VUE3.0: Bevor Sie mit dem Lernen beginnen,

stellen wir Ihnen zunächst vor, was ein Hook ist,

ein neues Feature von React 16.8. Es wird speziell in Funktionskomponenten verwendet und kann andere Features von React in Class ersetzen und wird häufig in der tatsächlichen Arbeit verwendet.

Warum wird empfohlen, Hooks für

die Entwicklung zu verwenden? Sie können verwendet werden, um einige der Lebenszyklen von Klassenkomponenten zu ersetzen, um Verwirrung zu vermeiden. Hooks sind praktisch für die Entwicklung und für Entwickler einfacher, den Code zu verstehen.

Weitere Gründe finden Sie auf der offiziellen React-Website:

https://react.docschina.org/docs/hooks-intro. html#motivation

useState

Im Code:

React.useState(0) entspricht this in der Klassenkomponente. Das Hinzufügen einer Attributwertvariablen

zu

state entspricht this.state in der Klassenkomponente

import React (useState) aus „react“

entsprechen kann.

Standardfunktion exportieren useState_Demo() {
    const [variable, setVariable] = useState(0);//Durch Destrukturierungszuweisung erhalten wir die Variable und setVariable
    Funktion changeVariable(){
        setVariable((variable) => variable +1) //Der im Rückruf von setVariable übergebene Parameter ist variabel
    }
    rendern (
        <div> 
            <button onclick = {change}>Klicken Sie auf mich, um Variable+1 zu erstellen</button>
        </div>
    )
}

useEffect

-Code:

Wie aus dem folgenden Code ersichtlich ist, ersetzt die Verwendung von useEffect die Verwendung von „componentDidMoun“, „componentDidUpdate“ und „componentWillUnmount“ in der Klasse „

react“, (useState, useEffect) aus „react“

Standardfunktion exportieren useState_Demo() {
   const [variable, setVariable] = useState(0);//Durch Destrukturierungszuweisung erhalten wir die Variable und setVariable
    
    useEffect(() => {
        //Diese Rückgabe wird aufgerufen, wenn sich die von der Komponente überwachten Daten ändern oder wenn sie deinstalliert wird. Bei der Deinstallation kann der Aufruf dem ComponentWillUnmount-Hook return () => { entsprechen.
            console.log('Die Komponente wurde deinstalliert')
        }
    }, [Variable])//Der zweite Parameter wird übergeben [Variable], was bedeutet, dass die Aktualisierungsänderung der Variablen erkannt wird. Sobald sich die Variable ändert, wird der useEffect-Rückruf erneut ausgeführt //Der zweite Parameter wird übergeben [] Dies bedeutet, dass niemand den useEffect-Rückruf nur einmal ausführt, was dem ComponentDidMount-Hook entspricht. // Der zweite Parameter übergibt keine Parameter. Solange die Komponente eine Statusänderung aufweist, wird der useEffect-Rückruf ausgeführt entspricht der ComponentDidUpdate-Hook-Funktion changeVariable(){
        setVariable((variable) => variable +1) //Der im Rückruf von setVariable übergebene Parameter ist variabel
    }
    rendern (
        <div> 
            <button onclick = {change}>Klicken Sie auf mich, um Variable+1 zu erstellen</button>
        </div>
    )
}

Dinge, die bei der Verwendung von Hooks zu beachten sind

: 1. Verwenden Sie Hooks nur in der äußersten Ebene von Komponentenfunktionen. Rufen Sie Hooks nicht in Schleifen, Bedingungen oder verschachtelten Funktionen auf

.
Standardfunktion exportieren useState_Demo() {
   //Das ist der richtige useEffect(() => {})
    
   //Fehler 1, Verwendung der bedingten Beurteilung if(true) {
        useEffect(() => {})
   }
   //Fehler 2, Schleife wird verwendet while(true) {
        useEffect(() => {})
   }
  //Fehler 3, Verwendung von verschachteltem useEffect(() => {
      useEffect(() => {})
  })
}

-Import React (useState, useEffect) von „react“

kann nicht außerhalb der Funktion der Komponente verwendet werden.

//Fehler 1, useState wird außerhalb der Komponentenfunktion verwendet
const [Variable, setVariable] = useState(0);
//Fehler 2, useEffect wird außerhalb der Komponentenfunktion verwendet
useEffect(() => {})
Standardfunktion exportieren useState_Demo() {
   //Es ist korrekt, es in der Komponentenfunktion zu verwenden const [variable, setVariable] = useState(0);
}

3. Um die oben genannten Fehler zu vermeiden, können Sie das ESLint-Plugin eslint-plugin-react-hooks installieren, um den Code auf Fehler zu überprüfen.

Hook

ist eine Funktion, die die gemeinsame Nutzung von Logik erleichtert Komponenten, die tatsächlich wiederverwendet werden. Die Funktion ist gekapselt, und der benutzerdefinierte Hook ruft auch den Hook auf, der mit „React“ geliefert wird. Der Name muss mit „use

// Custom Hook“

Funktion useHook(initState) {
  const [Variable, setVariable] = useState(initState)
  Rückgabevariable;
}
//Benutzerdefinierten Hook verwenden
Standardfunktion exportieren useState_Demo() {
    const variableState = useHook(0)
}

Sie fragen sich vielleicht: Wird die Verwendung desselben Hooks in mehreren Komponenten den Status teilen?

Die Antwort lautet: Nein. Da jeder Aufruf des mit React gelieferten Hooks unabhängig ist und sich nicht gegenseitig beeinflusst, ist der benutzerdefinierte Hook unabhängig und beeinflusst sich nicht gegenseitig, wenn er mehrmals aufgerufen wird.