Anwendungsbeispiele für React Hooks (6 gängige Hooks)

1. useState: Funktionskomponenten Status geben

Anwendungsbeispiel:

// Zähler importiere { useState } von 'react'
const Test = () => {
    const [Anzahl, Anzahl festlegen] = useState(0);
    zurückkehren (
        <>
            <h1>{count}-mal geklickt</h1>
            <button bei Klick={() => setCount(Anzahl + 1)}>+1</button>
        </>
    );
}
Standardtest exportieren

PS: In der Klassenkomponente aktualisiert this.setState den Status durch Zusammenführen, während setState ihn in useState ersetzt. Zum Beispiel:

// Fehlerbeispiel import { useState } von 'react'
const Test = () => {
    const [Anzahl, Anzahl festlegen] = useState({
        Zahl1: 0,
        Zahl2: 0
    });
    zurückkehren (
        <>
            <h1>Anzahl1:{Anzahl.Anzahl1}</h1>
            <h1>Anzahl2: {Anzahl.Anzahl2}</h1>
            <button onClick={() => setCounts({ num1: counts.num1 + 1})}>num1+1</button>
            <button onClick={() => setCounts({ num2: counts.num2 + 1})}>num2+1</button>
        </>
    );
}
Standardtest exportieren 

Sie können sehen, dass setState in useState ersetzt, nicht zusammengeführt und korrekt aktualisiert wird:

importiere { useState } von 'react'
const Test = () => {
    const [Anzahl, Anzahl festlegen] = useState({
        Zahl1: 0,
        Zahl2: 0
    });
    zurückkehren (
        <>
            <h1>Anzahl1:{Anzahl.Anzahl1}</h1>
            <h1>Anzahl2: {Anzahl.Anzahl2}</h1>
            <button beimKlick={() => setCounts({ ...Anzahl, Zahl1: Anzahl.Zahl1 + 1})}>Zahl1+1</button>
            <button beimKlicken={() => setCounts({ ...Anzahl, Anzahl2: Anzahl.Anzahl2 + 1})}>Anzahl2+1</button>
        </>
    );
}
Standardtest exportieren

2. useEffect: Nebenwirkungen, Ersatzlebenszyklus

Anwendungsbeispiel: Wenn wir in einer Klassenkomponente nach dem Mounten der Komponente und nach der Aktualisierung der Daten dasselbe tun müssen, würden wir Folgendes tun:

componentDidMount() {
    // etwas tun }
KomponenteDidUpdate() {
    // etwas tun }

Es ist ersichtlich, dass der Code bei komplizierter Logik unelegant aussieht und leicht logische Verwirrung stiftet. Außerdem gilt:

useEffect(() => {
    // etwas tun });

An diesem Punkt haben wir die grundlegende Verwendung von useEffect gesehen. Darüber hinaus kann es auch abhängige Zustände binden, die Aktualisierungen auslösen. Standardmäßig führt jede Datenänderung im Zustand den Nebeneffekt aus, wie zum Beispiel:

importiere { useState, useEffect } von 'react'
const Test = () => {
    const [Anzahl1, setzeAnzahl1] = useState(0);
    const [Anzahl2, setzeAnzahl2] = useState(0);
    useEffect(() => {
        console.log('useEffect ausgelöst')
    });
    zurückkehren (
        <>
            <h1>Anzahl1:{Anzahl1}</h1>
            <h1>Anzahl2:{Anzahl2}</h1>
            <button bei Klick={() => setzeAnzahl1(Anzahl1 + 1)}>Anzahl1+1</button>
            <button bei Klick={() => setzeAnzahl2(Anzahl2 + 1)}>Anzahl2+1</button>
        </>
    );
}
Standardtest exportieren 

Übergeben Sie den zweiten Parameter von useEffect im obigen Code an den zu bindenden Status. Sie können mehrere Status binden:

// Syntax: useEffect(Rückruffunktion, [Abhängigkeitswert])
useEffect(() => {
    console.log('useEffect ausgelöst')
}, [Anzahl1]); 

Wie Sie sehen, wird es nur ausgelöst, wenn sich die gebundene Anzahl von count1 ändert. Wenn ein leeres Array übergeben wird, werden keine Statusänderungen ausgelöst. Zu diesem Zeitpunkt ist die Rolle von useEffect ähnlich wie bei componentDidMount in der Klassenkomponente, sodass das Senden von Anforderungen normalerweise hier ausgeführt wird.

Beseitigung von Nebenwirkungen

Bei den obigen Vorgängen müssen die Nebeneffekte nicht bereinigt werden. Einige Nebeneffekte müssen jedoch bereinigt werden. Wenn die Bereinigung unterbleibt, treten Ausnahmen oder sogar Speicherlecks auf. Wenn beispielsweise ein Timer eingeschaltet wird, wird er mehrmals eingeschaltet, wenn er nicht bereinigt wird. Aus dem Obigen können Sie ersehen, dass der erste Parameter von useEffect eine Rückruffunktion ist und eine Funktion in der Rückruffunktion zurückgegeben werden kann. Diese Funktion kann aufgerufen werden, bevor die erste Rückruffunktion ausgeführt wird, nachdem der Status aktualisiert wurde. Die spezifische Implementierung lautet:

useEffect(() => {
    // Nebeneffekte einrichten return () => {
        // Nebeneffekte beseitigen }
});

3. useContext: Daten zwischen Komponenten teilen

React.createContext(); Erstellen Sie ein TestContext-Objekt
TestContext.Provider verpackt die Daten der Unterkomponente in den Wert von <TestContext.Provider value={value}> und erhält den Wert über useContext(TestContext) in der Unterkomponente

importiere React, { useContext, useState } von „react“;
const TestContext = React.createContext();
const Parent = () => {
    const [Wert, gesetzter Wert] = useState(0);
    zurückkehren (
        <div>
            {(() => console.log("Übergeordnetes Rendern"))()}
            <button onClick={() => setValue(Wert + 1)}>Wert + 1</button>
            <TestContext.Provider-Wert={Wert}>
                <Kind1 />
                <Kind2 />
            </TestContext.Provider>
        </div>
    );
}
const Kind1 = () => {
    konstanter Wert = useContext(TestContext);
    zurückkehren (
        <div>
            {(() => console.log('Child1-render'))()}
            <h3>Kind1-Wert: {Wert}</h3>
        </div>
    );
}
const Kind2 = () => {
    zurückkehren (
        <div>
            {(() => console.log('Child2-render'))()}
            <h3>Kind2</h3>
        </div>
    );
}
Standard-Übergeordnetes Element exportieren 

Bisher wurden die Daten freigegeben, aber Sie können sehen, dass die untergeordneten Komponenten neu gerendert werden, sobald sich die freigegebenen Daten in TestContext ändern. Child2 ist nicht an Daten gebunden und Sie möchten nicht, dass es sinnloses Rendering durchführt. Sie können React.memo verwenden, um das Problem zu lösen und es umzusetzen:

const Child2 = React.memo(() => {
    zurückkehren (
        <div>
            {(() => console.log('Child2-render'))()}
            <h3>Kind2</h3>
        </div>
    );
}); 

4. useCallback: Leistungsoptimierung

Grammatik:

// useCallback(Rückruffunktion, [Abhängigkeitswert])
const handleClick = useCallback(()=> {
    // etwas tun }, [Wert]);

useCallback gibt eine gespeicherte Funktion zurück. Wenn die Abhängigkeiten unverändert bleiben, ist der zurückgegebene Wert derselbe, wenn er mehrfach definiert wird. Das Implementierungsprinzip besteht darin, dass beim ersten Aufruf einer Funktion mit einem Satz von Parametern die Parameter und Berechnungsergebnisse zwischengespeichert werden. Wenn die Funktion erneut mit denselben Parametern aufgerufen wird, werden die entsprechenden zwischengespeicherten Ergebnisse direkt zurückgegeben.

Beispiele zur Leistungsoptimierung:

importiere React, { useState, useCallback, memo } von „react“;
const Parent = () => {
    const [Wert1, gesetzterWert1] = useState(0);
    const [Wert2, setzeWert2] = useState(0);
    const handleClick1 = useCallback(()=> {
        setzeWert1(Wert1 + 1);
    }, [Wert1]);
    const handleClick2 = useCallback(()=> {
        setzeWert2(Wert2 + 1);
    }, [Wert2]);
    zurückkehren (
        <>
            {(() => console.log("Übergeordnetes Rendern"))()}
            <h3>{Wert1}</h3>
            <h3>{Wert2}</h3>
            <Untergeordneter HandleClick1 = {HandleClick1} />
            <Untergeordneter2 handleClick2={handleClick2} />
        </>
    );
}
const Child1 = memo(Eigenschaften => {
    zurückkehren (
        <div>
            {(() => console.log("Child1-render"))()}
            <button onClick={() => props.handleClick1()}>Wert1 + 1</button>
        </div>
    );
});
const Child2 = memo(Eigenschaften => {
    zurückkehren (
        <div>
            {(() => console.log("Child2-render"))()}
            <button onClick={() => props.handleClick2()}>Wert2 + 1</button>
        </div>
    );
});
Standard-Übergeordnetes Element exportieren 

useCallback gibt eine gespeicherte Rückruffunktion zurück, die nur geändert wird, wenn sich eine der gebundenen Abhängigkeiten ändert, um unnötiges Rendering zu vermeiden. Das als Beispiel für die komponentenübergreifende Datenfreigabe verwendete Ereignis wird durch einen Klick in der übergeordneten Komponente ausgelöst, aber jetzt verwenden wir die Statusförderung, um Methoden in der übergeordneten Komponente zu übergeben, die die untergeordnete Komponente aufrufen kann. Die Funktion ändert sich auch bei jedem Rendering, wodurch die untergeordnete Komponente erneut gerendert wird. Im obigen Beispiel umschließt useCallback die Funktion und gibt die zwischengespeicherte Funktion zurück, wenn sich der abhängige Wert nicht geändert hat. React.memo kann verwendet werden, um bedeutungsloses Rendering zu optimieren.

5. useMemo: Leistungsoptimierung

Grammatik:

// useMemo(Rückruffunktion, [Abhängigkeitswert])
useMemo(() => {
    // etwas tun },[Wert]);

Schauen wir uns ein Beispiel an:

importiere React, { useState } von 'react'
const Test = ()=> {
    const [Wert, gesetzter Wert] = useState(0);
    const [Anzahl, Anzahl festlegen] = useState(1);
    const getDoubleCount = () => {
        console.log('getDoubleCount wird berechnet');
        Anzahl zurückgeben * 2;
    };
    zurückkehren (
        <div>
            <h2>Wert: {Wert}</h2>
            <h2>Doppelzähler: {getDoubleCount()}</h2>
            <button onClick={() => setzeWert(Wert + 1)}>Wert+1</button>
        </div>
    )
}
Standardtest exportieren 

Sie können sehen, dass getDoubleCount von count abhängt, aber auch neu berechnet und gerendert wird, wenn sich der Wert ändert. Jetzt müssen Sie getDoubleCount nur noch mit useMemo umschließen, wie folgt:

importiere React, { useState, useMemo } von 'react'
const Test = ()=> {
    const [Wert, gesetzter Wert] = useState(0);
    const [Anzahl, Anzahl festlegen] = useState(1);
    const getDoubleCount = useMemo(() => {
        console.log('getDoubleCount wird berechnet');
        Anzahl zurückgeben * 2;
    },[zählen]);
    zurückkehren (
        <div>
            <h2>Wert: {Wert}</h2>
            <h2>Doppelzähler: {getDoubleCount}</h2>
            <button onClick={() => setzeWert(Wert + 1)}>Wert+1</button>
        </div>
    )
}
Standardtest exportieren 

Jetzt wird getDoubleCount nur dann neu berechnet und gerendert, wenn sich die abhängige Anzahl ändert.

Was useMemo und useCallback gemeinsam haben:

• Die empfangenen Parameter sind dieselben, der erste ist die Rückruffunktion, der zweite sind die abhängigen Daten
• Sie alle berechnen die Ergebnisse neu, wenn sich die abhängigen Daten ändern, was eine Caching-Rolle spielt.

Der Unterschied zwischen useMemo und useCallback:

• Das Berechnungsergebnis von useMemo ist der zurückgegebene Wert, der normalerweise zum Zwischenspeichern des Werts des Berechnungsergebnisses verwendet wird
• Das Ergebnis der useCallback-Berechnung ist eine Funktion, die normalerweise zum Zwischenspeichern von Funktionen verwendet wird

6. Verwendung von useRef: Um beispielsweise das Eingabefeld durch Klicken auf eine Schaltfläche den Fokus erhalten zu lassen:

importiere React, { useState, useMemo } von 'react'
const Test = ()=> {
    const [Wert, gesetzter Wert] = useState(0);
    const [Anzahl, Anzahl festlegen] = useState(1);
    const getDoubleCount = useMemo(() => {
        console.log('getDoubleCount wird berechnet');
        Anzahl zurückgeben * 2;
    },[zählen]);
    zurückkehren (
        <div>
            <h2>Wert: {Wert}</h2>
            <h2>Doppelzähler: {getDoubleCount}</h2>
            <button onClick={() => setzeWert(Wert + 1)}>Wert+1</button>
        </div>
    )
}
Standardtest exportieren

Dies sieht React.createRef() sehr ähnlich. Das Ändern von useRef() im obigen Code in React.createRef() kann denselben Effekt erzielen. Warum also einen neuen Hook entwerfen? Geht es lediglich darum, die Verwendungsmöglichkeiten zu erweitern und die Hook-Spezifikationen zu vereinheitlichen?
Tatsächlich sind sie tatsächlich unterschiedlich.

Auf der offiziellen Website heißt es dazu:

useRef gibt ein veränderbares Ref-Objekt zurück, dessen .current-Eigenschaft mit dem übergebenen Wert initialisiert wird.
Argument (Initialwert). Das zurückgegebene Objekt bleibt für die gesamte Lebensdauer der Komponente bestehen.

übersetzen:

Einfach ausgedrückt ist useRef wie eine Aufbewahrungsbox. Sie können alles speichern, was Sie möchten. Wenn Sie erneut rendern, wird es in die Aufbewahrungsbox verschoben, um es zu finden. CreateRef gibt bei jedem Rendern eine neue Referenz zurück, während useRef jedes Mal dieselbe Referenz zurückgibt.

Damit ist dieser Artikel über die detaillierte Verwendung von React Hook (6 gängige Hooks) abgeschlossen. Weitere Inhalte zur Verwendung von React Hook finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!