Häufige Verwendung von Hooks in React

1. Was ist ein Hook?

React Hook ist eine in React 16.8 eingeführte Methode, die es funktionalen Komponenten ermöglicht, Status, Referenz, Lebenszyklus und andere Eigenschaften wie Klassenkomponenten zu haben.

2. Warum erscheint der Haken?

Eine Funktionskomponente ist eine gewöhnliche Funktion in der globalen Welt. Im nicht strikten Modus zeigt dies auf Fenster, aber der strikte Modus ist in React aktiviert. Zu diesem Zeitpunkt zeigt dies auf undefiniert und kann Status und Verweise nicht wie Klassenkomponenten verwenden. Die von Funktionskomponenten definierten Variablen sind lokal und werden neu definiert, wenn die Komponente aktualisiert wird, und können nicht gespeichert werden. Daher hatten Funktionskomponenten vor dem Auftreten von Hooks große Einschränkungen und Klassenkomponenten wurden normalerweise zum Schreiben von Code verwendet.

3. Welche Hooks werden häufig verwendet?

(1) useState

Ein Hook, der es funktionalen Komponenten ermöglicht, Zustände zu speichern. Der Eingabeparameter dieses Hooks ist der Anfangswert des Zustands, und der Rückgabewert ist ein Array. Der erste Parameter im Array ist der Wert des Zustands, und der zweite Parameter ist die Methode zum Ändern des Zustands.

// Initialisieren const [ count, setCount ] = useState(0)
// Aktualisiere setCount(Anzahl+1)

(2) useEffect

Funktionale Komponenten werden verwendet, um den Hook des Lebenszyklus zu simulieren. Sie können die drei Phasen der Komponentenmontage, -aktualisierung und -deinstallation simulieren, nämlich componentDidMount, componentDidUpdate und componentWillUnmount.

Einer der Parameter von useEffect ist eine Funktion, die den Inhalt darstellt, der ausgeführt wird, wenn die Komponente bereitgestellt und aktualisiert wird. In der Funktion wird eine weitere Funktion zurückgegeben, die die Funktion darstellt, die aufgerufen wird, wenn die Komponente deinstalliert werden soll.

Der zweite Parameter ist optional und kann in ein Array übergeben werden. Das Array kann leer sein, was bedeutet, dass es nicht von Statusänderungen abhängt. Das heißt, es wird nur ausgeführt, wenn die Komponente gemountet werden soll. Dieser Hook wird nicht aufgerufen, wenn sich ein nachfolgender Status ändert. Es können auch ein oder mehrere Zustände im Array definiert werden, was bedeutet, dass bei jeder Zustandsänderung dieser Hook ausgeführt wird.

Effekt verwenden(()=>{
  // Dies simuliert componentDidMount
}, [])

Effekt verwenden(()=>{
  // Dies simuliert componentDidMount und führt componentDidUpdate aus, wenn sich die Anzahl ändert
}, [zählen])

Effekt verwenden(()=>{
  Rückkehr ()=>{
  // Dies simuliert componentWillUnmount
  }
}, [])

(3) useContext

Vor dem Hook übergeben und erhalten wir Kontextwerte normalerweise über xxxContext.Provider und xxxContext.Consumer. Nach dem Hook bleibt die Art der Kontextübergabe unverändert, aber die Art und Weise, wie untergeordnete Elemente Kontext erhalten, wird einfacher.

// Vorherige Definition const CountContext = React.createContext()
 <CountContext.Provider-Wert={{ Anzahl: 10 }}>
     <...kundenspezifische Komponenten>
 </CountContext.Provider>

// Untergeordnetes Element <CountContext.Consumer>
    { Wert => { console.log(Wert.Anzahl) }} //10
</CountContext.Consumer>

//Verwende Kontext, um die Methode zu erhalten const countObj = useContext(CountContext)
console.log(AnzahlObjekte.Anzahl) // 10

(4) useRef

Die Verwendung von useRef ähnelt der von createRef in Klassenkomponenten. Es gibt ein Ref-Objekt zurück, das während des gesamten Lebenszyklus der Funktion unverändert bleibt. Basierend auf dieser Funktion gibt es zwei gängige Verwendungen.

① Bei Verwendung auf DOM-Elementen oder -Komponenten kann das Instanzobjekt des DOM-Elements oder der Klassenkomponente über das aktuelle Attribut abgerufen werden. Es ist zu beachten, dass unabhängig davon, ob es sich um useRef, createRef oder ref in Rückrufform oder Zeichenfolgenform handelt, es nicht direkt für Funktionskomponenten definiert werden kann, da this von Funktionskomponenten auf undefined verweist und kein Instanzobjekt vorhanden ist. Es kann nur über forwardRef für ein DOM-Element in der Funktionskomponente definiert werden.

// Dadurch wird der an die Funktionskomponente übergebene Verweis an das Eingabe-Tag innerhalb der Funktionskomponente gebunden. import React, { useRef, forwardRef } von „react“

// Definieren Sie eine funktionale Komponente mit dem Funktionsausdruck const InputCom = forwardRef((props, ref) => {
    Rückgabewert <input ref={ref}/>
 })

exportiere Standardfunktion refDemo(){
    const comRef = useRef()
    Rückkehr(<div>
       <InputCom ref={comRef}/>
         </div>)
  }

② Speichern Sie Daten, die während ihres gesamten Lebenszyklus unverändert bleiben, sofern sie nicht manuell geändert werden

const [Anzahl, Anzahl festlegen] = useState(0)
const prevCount = useState(Anzahl)
// Wenn sich die Anzahl ändert, aktualisiert und speichert die Komponente die vorherigen Daten von countuseEffect(()=>{
  prevCount.current = Anzahl
}, [zählen])

(5) verwendenReducer

useReducer entspricht einer aktualisierten Version von useState. Seine Funktion ähnelt useState. Beide werden zum Speichern des Status verwendet. Der Unterschied besteht jedoch darin, dass Sie eine reine Reducer-Funktion definieren können, um komplexe Daten zu verarbeiten.

// Definieren Sie eine reine Reducer-Funktion zur Datenverarbeitung function reducer(prevState, action){
  Schalter(Aktion.Typ){
    Fall 'Inkrement':
      return {...vorherigerZustand, Anzahl: vorherigerZustand.Anzahl + 1 }
    Fall 'Dekrement':
      return {...vorherigerZustand, Anzahl: vorherigerZustand.Anzahl - 1 }
    Standard:
      Zurück zum vorherigen Status
  }
}

// Status initialisieren const [Anzahl, Dispatch] = useReducer(Reducer, {Anzahl: 0})
// Den Status ändern. Die Änderung erfordert zu diesem Zeitpunkt das Versenden einer Aktion, damit die eingehende Reducer-Funktion sie verarbeiten kann dispatch({ type: 'increment' })

(6) useCallback

Bei funktionalen Komponenten muss die benutzerdefinierte Funktion bei jeder Statusaktualisierung neu deklariert und neu definiert werden. Wenn die Funktion als Props an die untergeordnete Komponente übergeben wird, führt dies zu einem unnötigen erneuten Rendern der untergeordneten Komponente. Manchmal verwendet die untergeordnete Komponente den geänderten Status der übergeordneten Komponente nicht. In diesem Fall kann useCallback zur Leistungsoptimierung verwendet werden. Es gibt einen gespeicherten Wert für die Funktion zurück. Wenn sich der abhängige Status nicht geändert hat, wird die Funktion nicht neu erstellt und es kommt nicht zu einem unnötigen erneuten Rendern der untergeordneten Komponente.

importiere React, { useState, useCallback, memo } von 'react'
const AddBtn = memo((props)=>{ // Definieren Sie eine funktionale Komponente mit dem Funktionsausdruck return<button onClick={props.increment}>+1</button>
})

Exportiere die Standardfunktion CallBackPerformance(){
    const [Anzahl, Anzahl festlegen] = useState(0)
    const [ anzeigen, Anzeige festlegen ] = useState(true)
    const increment1 = () => {
        console.log('increment1 wird aufgerufen')
        setzeAnzahl(Anzahl+1)
    }

   const increment2 = useCallback(()=>{ // Mit useCallback optimierte Funktion console.log('increment2 wird aufgerufen')
         setzeAnzahl(Anzahl+1)
    },[zählen])

    Rückkehr(<div>
            <div>Aktueller Zähler: {count}</div>
            <AddBtn-Inkrement={Inkrement1} Name="1"/>
            <AddBtn-Inkrement={Inkrement2} Name="2"/>
            <button onClick={e => setShow(!show)}>Show umschalten</button>
        </div>)
}
// Wenn sich der Anzeigestatus ändert, wird die Unterkomponente increment1 neu gerendert, increment2 jedoch nicht.

(7) useMemo

useMemo gibt ebenfalls einen gespeicherten Wert zurück. Wenn sich der abhängige Inhalt nicht ändert, ändert sich dieser Wert nicht. Der Unterschied zwischen useMemo und useCallback besteht darin, dass useMemo in der übergebenen Funktion einen Wert zurückgeben muss. Dieser Wert kann ein Objekt oder eine Funktion sein. Das Format ist wie folgt.

useMemo(()=>{
  return { Anzahl }
}, [zählen])

// Bei Verwendung von useCallback
   const increment2 = useCallback(()=>{
    setzeAnzahl(Anzahl+1)
},[zählen])

//Verwende useMemo, um useCallback zu simulieren
const increment2 = useCallback(()=>{
    Rückkehr ()=>{
        setzeAnzahl(Anzahl+1)
    }
},[zählen])

// Das Anwendungsszenario von useMemo ist, wenn einige komplexe Berechnungen durchgeführt werden müssen.
//Der berechnete Wert hat sich nicht geändert und muss nicht bei jedem Update neu berechnet werden import React, { useState, useMemo } from 'react'
const berechneAnzahl = (Anzahl) => {
    console.log('Gesamtzahl neu berechnet')
    sei total = 0
    für(lass i = 0; i <= Anzahl; i++){
        Gesamtsumme += i
    }
    Rendite Gesamt
}

Exportiere Standardfunktion ComplexUseMemo(){
    const [Anzahl, Anzahl festlegen] = useState(10)
    const [ anzeigen, Anzeige festlegen ] = useState(true)
    const total = useMemo(()=>{
        returniere berechneAnzahl(Anzahl)
    }, [zählen])
    Rückkehr(<div>
        <div>{Gesamt}</div>
        <button bei Klick={e=>Anzahl festlegen(Anzahl+1)}>+1</button>
        <button onClick={e=>setShow(!show)}>Show wechseln</button>
    </div>)
}

(8) useImperativeHandle

Dies wird in Verbindung mit forwardRef verwendet. Wenn wir forwardRef verwenden, um das DOM-Element für die Funktionskomponente anzugeben, kann die übergeordnete Komponente das angegebene DOM-Element beliebig bedienen. Die Verwendung von useImperativeHandle dient dazu, ein solches Verhalten zu steuern und die Methode des untergeordneten Elements anzugeben, das das übergeordnete Element bedienen kann.

importiere React, { useRef, useImperativeHandle, forwardRef } von 'react'
const InputComp = forwardRef((props, ref)=>{
  const childInputRef = useRef()
  useImperativeHandle(ref, ()=>({
    Fokus: ()=>{
      childInputRef.current.focus()
    }
  }), [childInputRef.current])

  Rückgabewert <input ref={childInputRef}></input>
})

Export-Standardfunktion ImperativeHookDemo() {
  const inputRef = useRef()
  Rückkehr(<div>
      <InputComp ref={inputRef}/>
      <button onClick={e=>inputRef.current.focus()}>Fokus</button>
    </div>)
}

(9) verwendenLayoutEffect

Diese Methode ähnelt useEffect, die Ausführungsreihenfolge ist jedoch etwas anders. useEffect erfolgt, nachdem die Komponente gerendert und auf dem Bildschirm dargestellt wurde, und useLayoutEffect erfolgt zwischen dem Rendern und dem Darstellen auf dem Bildschirm.

4. Wie kann ich den Hook anpassen?

Hooks können nur in Funktionskomponenten definiert werden und können nicht in normalen Funktionen verwendet werden. Wenn wir den obigen Hook verwenden möchten, um einige Methoden zu kapseln, die von mehreren Komponenten aufgerufen werden können, müssen wir den Hook anpassen. Der Name des benutzerdefinierten Hooks besteht darin, vor dem Funktionsnamen „use“ hinzuzufügen und den Funktionsnamen von saveInfo in useSaveInfo zu ändern.

Oben ist die detaillierte Verwendung gängiger Hooks in React beschrieben. Weitere Informationen zur Verwendung von React-Hooks finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!