So starten Sie schnell mit VUE3.0: Enter Learning
Hooks werden verwendet, um Status- und andere React-Funktionen zu verwenden, ohne Klassen schreiben zu müssen. Was genau sind Hooks, warum sollten wir Hooks verwenden, welche allgemeinen Hooks bietet React und wie werden Hooks im Folgenden einzeln vorgestellt?
Hooks werden als Hooks übersetzt und sind Funktionen innerhalb von Funktionskomponenten, die für die Verknüpfung mit externen Funktionen verantwortlich sind.
React bietet einige gängige Hooks und React unterstützt auch benutzerdefinierte Hooks. Diese Hooks werden verwendet, um externe Funktionen in Funktionen einzuführen.
Wenn wir externe Funktionen in eine Komponente einführen müssen, können wir die von React bereitgestellten Hooks verwenden oder Hooks anpassen.
Wenn Sie beispielsweise die Funktion zum Verwalten des Status in einer Komponente einführen, können Sie die Funktion useState verwenden. Die Verwendung von useState wird im Folgenden ausführlich vorgestellt.
Hooks verwendet werden Es gibt zwei Hauptgründe für die Verwendung von Hooks:
Vor dem Aufkommen von Hooks musste React komplexe Entwurfsmuster wie Komponenten höherer Ordnung und Render-Requisiten ausleihen, um die Wiederverwendung von Logik zu erreichen.
Mit Hooks können wir die Statuslogik wiederverwenden, ohne die Komponentenstruktur zu ändern. Die Verwendung benutzerdefinierter Hooks wird im Folgenden ausführlich vorgestellt.
In Klassenkomponenten ist der Code für dieselbe Geschäftslogik auf verschiedene Lebenszyklusfunktionen der Komponente verteilt, und Hooks können den Code für dieselbe Geschäftslogik zusammenfassen, sodass die Geschäftslogik vorhanden ist klar getrennt, wodurch der Code leichter zu verstehen und zu warten ist.
useState ist ein Hook, mit dem Sie Status in React-Funktionskomponenten hinzufügen können.
Anwendungsbeispiele sind wie folgt:
import React, { useState } from 'react';
Funktion Beispiel() {
// Deklarieren Sie eine Statusvariable namens „count“ const [count, setCount] = useState(0);
// ... Der obige Code deklariert eine Statusvariable count mit einem Anfangswert von 0 und aktualisiert die aktuelle Anzahl durch Aufruf von setCount.
Mit useEffect können Sie Nebeneffektoperationen in Funktionskomponenten ausführen.
Nebenwirkungen beziehen sich auf einen Codeabschnitt, der nichts mit den aktuellen Ausführungsergebnissen zu tun hat, einschließlich der Datenerfassung, dem Festlegen von Abonnements und der manuellen Änderung des DOM in React-Komponenten.
useEffect kann zwei Parameter empfangen. Der Code lautet wie folgt:
useEffect(callback, dependencies)
Der erste Parameter ist der auszuführende Funktionsrückruf und der zweite Parameter sind die optionalen Abhängigkeiten des Abhängigkeitsarrays.
Wenn die Abhängigkeit nicht angegeben ist, wird der Rückruf jedes Mal ausgeführt, wenn die Funktionskomponente ausgeführt wird. Wenn sie angegeben ist, wird sie nur ausgeführt, wenn sich der Wert in der Abhängigkeit ändert.
Anwendungsbeispiele sind wie folgt:
Funktion Beispiel() {
const [count, setCount] = useState(0);
// Ähnlich wie ComponentDidMount und ComponentDidUpdate:
useEffect(() => {
// Aktualisieren Sie den Dokumenttitel mithilfe der Browser-API
document.title = „Sie haben ${count} Mal angeklickt“;
return () => {
// Kann zum Löschen verwendet werden, äquivalent zu „componentWillUnmount“ der Klassenkomponente
}
}, [count]); // Geben Sie die Abhängigkeit als count an und führen Sie den Nebeneffekt aus, wenn die Anzahl aktualisiert wird. // ... Der obige Code verwendet useEffect, um die Nebeneffektfunktion zu implementieren, wenn die Abhängigkeitsanzahl aktualisiert wird, und sie zu löschen durch Rückgabe der Rückruffunktion Das letzte Ausführungsergebnis.
Darüber hinaus bietet useEffect vier Timings für die Ausführung von Nebeneffekten:
Die durch useCallback definierte Rückruffunktion deklariert die Rückruffunktion nur dann neu, wenn sich die Abhängigkeiten ändern, wodurch sichergestellt wird, dass die Komponente keine doppelten Rückruffunktionen erstellt . Die Komponente, die diese Rückruffunktion als Attribut empfängt , muss nicht häufig neu gerendert werden .
Anwendungsbeispiele sind wie folgt:
const memoizedCallback = useCallback(() => {
doSomething(a, b)
}, [a, b]) Der obige Code deklariert die Rückruffunktion nur dann neu, wenn sich die Abhängigkeiten a und b ändern.
Die durch useMemo definierte Erstellungsfunktion wird nur dann neu berechnet, wenn sich eine bestimmte Abhängigkeit ändert. Dies hilft bei Berechnungen mit hohem Overhead, die nicht bei jedem Rendern wiederholt werden , und die Komponente, die diesen berechneten Wert als Eigenschaft erhält , wird dies nicht tun Häufiges erneutes Rendern ist erforderlich .
Anwendungsbeispiele sind wie folgt:
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b])
Der obige Code wird nur neu berechnet, wenn sich die Abhängigkeiten a und b ändern.
useRef gibt ein Ref-Objekt zurück, das während des gesamten Lebenszyklus der Komponente bestehen bleibt.
Es hat zwei Verwendungszwecke:
Ein Beispiel für das Speichern eines DOM-Knotens ist wie folgt:
function TextInputWithFocusButton() {
const inputEl = useRef(null)
const onButtonClick = () => {
// „current“ zeigt auf das Texteingabeelement inputEl.current.focus(), das im DOM gemountet wurde
}
zurückkehren (
<>
)
} Der obige Code erstellt über useRef ein Ref-Objekt, speichert die Referenz des DOM-Knotens und kann DOM-Operationen für ref.current ausführen.
Ein Beispiel für die gemeinsame Nutzung von Daten zwischen mehreren Renderings ist wie folgt:
import React, { useState, useCallback, useRef } from 'react'
Exportieren Sie die Standardfunktion Timer() {
//Zeitstatus definieren, um die akkumulierte Zeit des Timings zu speichern const [time, setTime] = useState(0)
// Timer definieren. Ein solcher Container wird verwendet, um eine Variable zwischen komponentenübergreifenden Renderings zu speichern. const timer = useRef(null)
// Event-Handler-Funktion zum Starten des Timings const handleStart = useCallback(() => {
// Verwenden Sie das aktuelle Attribut, um den Wert von ref festzulegen timer.current = window.setInterval(() => {
setTime((Zeit) => Zeit + 1)
}, 100)
}, [])
// Funktion zur Verarbeitung von Timing-Ereignissen anhalten const handlePause = useCallback(() => {
// ClearInterval verwenden, um die Zeitmessung zu stoppen window.clearInterval(timer.current)
timer.current = null
}, [])
zurückkehren (
{Zeit / 10} Sekunden.
)
} Der obige Code erstellt über useRef ein Ref-Objekt mit dem Variablennamen timer. Dieses Objekt kann beim Rendern über Komponenten hinweg aufgerufen werden, beim Starten des Timings einen neuen Timer erstellen und den Timer löschen, wenn das Timing angehalten wird.
useContext wird verwendet, um ein Kontextobjekt zu empfangen und den Wert des Kontexts zurückzugeben, wodurch ein ebenenübergreifender Datenaustausch erreicht werden kann.
Ein Beispiel lautet wie folgt:
//Kontextobjekt erstellen const MyContext = React.createContext(initialValue)
Funktion App() {
zurückkehren (
// Den Wert des Kontexts über Context.Provider übergeben
)
}
Funktion Container() {
gib Der obige Code ruft den in der App-Komponente definierten Kontext über useContext ab und erreicht so die gemeinsame Nutzung von Daten zwischen hierarchischen Komponenten.
useReducer wird verwendet, um die Reducer-Funktion einzuführen.
Ein Beispiel lautet wie folgt:
const [state, Dispatch] = useReducer(reducer, initialState)
Es akzeptiert die Reducer-Funktion und den Anfangswert des Status als Parameter und gibt ein Array zurück. Das erste Mitglied des Arrays ist der aktuelle Wert des Zustands und das zweite Mitglied ist die Dispatch-Funktion, die die Aktion sendet.
Durch benutzerdefinierte Hooks kann Komponentenlogik in wiederverwendbare Funktionen extrahiert werden.
Benutzerdefinierte Hooks sind Funktionen, die zwei Merkmale aufweisen, die sie von gewöhnlichen Funktionen unterscheiden:
Ein Beispiel ist wie folgt:
import { useState, useCallback } from 'react'
Funktion useCounter() {
// Anzahl definieren, dieser Zustand wird verwendet, um den aktuellen Wert zu speichern const [count, setCount] = useState(0)
// Implementieren Sie die Operation zum Hinzufügen von 1 const increment = useCallback(() => setCount(count + 1), [count])
// Implementieren Sie die Operation der Dekrementierung um 1 const decrement = useCallback(() => setCount(count - 1), [count])
//Zähler zurücksetzen const reset = useCallback(() => setCount(0), [])
// Exportieren Sie die Geschäftslogikoperationen, damit der Aufrufer sie verwenden kann. return { count, increment, decrement, reset }
}
// Komponente 1
Funktion MyComponent1() {
const { count, inkrementieren, dekrementieren, zurücksetzen } = useCounter()
}
// Komponente 2
Funktion MyComponent2() {
const { count, inkrementieren, dekrementieren, zurücksetzen } = useCounter()
} Der obige Code verwendet die Geschäftslogik zwischen der Komponente „MyComponent1“ und der Komponente „MyComponent2“ problemlos wieder, indem Hooks useCounter angepasst wird.
React stellt offiziell die React-Use-Bibliothek bereit, die eine große Anzahl benutzerdefinierter Hooks kapselt, die direkt verwendet werden können, was uns dabei hilft, die interne Logik von Komponenten zu vereinfachen und die Lesbarkeit und Wartbarkeit des Codes zu verbessern.
Zu unseren häufig verwendeten benutzerdefinierten Hooks gehören:
Sie können die offizielle Website von React-Use besuchen, um zu erfahren, wie Sie es verwenden.
In diesem Artikel werden React Hooks unter vier Aspekten vorgestellt: Was Hooks sind, warum man Hooks verwendet, welche allgemeinen Hooks React bietet und wie man Hooks anpasst. Ich glaube, dass jeder ein tieferes Verständnis von React Hooks hat.
Ich hoffe, es hilft dir, danke fürs Lesen~