Sie kennen vielleicht bereits React-Hooks und wissen sogar, welche grundlegenden Hooks das Framework bietet. Mit Hooks können Sie den Zustand und andere Funktionen verwalten, ohne eine Klasse schreiben zu müssen. Die grundlegenden Haken sind useState, useEffekt, und useContext. In diesem Artikel lernen Sie einige zusätzliche Hooks kennen, die ein komplizierteres Verhalten hinzufügen.

Die zusätzlichen Hooks, die Sie lernen werden, sind useRef und useMemo.

useRef

Die useRef Funktion gibt ein veränderbares ref-Objekt zurück und initialisiert dessen .aktuell -Eigenschaft an das übergebene Argument. Die Leute verwechseln oft die Verwendung von useRef Haken mit useState Haken. Sie können diesen Hook anweisen, die Referenz von an. zu halten HTML-Element. Mit dieser Referenz können Sie dieses Element leicht manipulieren.

Die useRef Hook hat nur eine Eigenschaft: .aktuell. React rendert die Seite nicht erneut, wenn sich ihr Element ändert. Es wird auch nicht erneut gerendert, wenn Sie den Wert von ändern.

aktuell Eigentum. Lassen Sie uns die Verwendung dieses Hooks anhand eines Beispiels verstehen:

import React, { useState, useRef } from 'react';
Standardfunktion exportieren App() {
const count = useRef (null);
const [Zahl, SetNumber] = useState (0);
const checkNumber = () => {
if (count.current.value < 10) {
count.current.style.backgroundColor = "rot";
} anders {
count.current.style.backgroundColor = "grün";
}
};
Rückkehr (


Geben Sie eine Zahl größer als 10. ein

ref={count}
type="text"
Wert={Zahl}
onChange={(e) => setNumber (e.target.value)}
/>
 checkNumber()}>Klick



);
}

Im obigen Code ändert sich die Farbe des Eingabeelements entsprechend der Zahl, die Sie in das Eingabefeld eingeben. Zuerst weist es das Ergebnis aus dem useRef() Haken an den zählen Variable. Es gibt zwei Elemente: Eingabe und Schaltfläche. Das Eingabeelement hat den Wert von Nummer und der ref Eigenschaft des Input-Tags ist zählen um die Variable abzugleichen.

Wenn Sie auf die Schaltfläche klicken, wird die überprüfe Nummer() Funktion wird aufgerufen. Diese Funktion prüft, ob der Wert des Nummer ist größer als 10. Es dann legt die Hintergrundfarbe fest des Eingabeelements mit der count.current.style.backgroundColor Eigentum.

Verwandt: CSS-Grundlagen: Arbeiten mit Farben

useMemo

Der useMemo-Hook berechnet einen zwischengespeicherten Wert neu, wenn sich eine seiner Abhängigkeiten ändert. Diese Optimierung hilft, teure Berechnungen bei jedem Rendering zu vermeiden.

Die Syntax des useMemo Haken ist wie folgt:

const memoizedValue = useMemo(() => computeExpensiveValue (a), [a]);

Betrachten wir zum besseren Verständnis ein Beispiel. Der folgende Code schaltet die Farben von zwei Überschriften um. Es nennt die useState Haken, um ihre Werte zu verfolgen. Eine Funktion zeigt an, ob die Farbe ihrem Wert entsprechend heiß oder kalt ist. Bevor der Status der Farbe zurückgegeben wird, gibt es eine while-Schleife, die ungefähr eine Sekunde lang pausiert. Dies ist zu Demonstrationszwecken, um den Nutzen der useMemo Haken.

import React, { useState, useMemo } from 'react';
Standardfunktion exportieren App() {
const [color1, setColor1] = useState("blau");
const [color2, setColor2] = useState("grün");
const toggleColor1 = () => {
Farbe1 "blau" zurückgeben? setColor1("rot"): setColor1("blau");
};
const toggleColor2 = () => {
Farbe2 "grün"? setColor2("orange"): setColor2("grün");
};
const displayColor = () => {
var now = neues Date().getTime();
while (neues Date().getTime() < jetzt + 1000);
Farbe1 "blau" zurückgeben? "kühl heiß";
};
Rückkehr (


Text 1 Farbe: {color1}

Es ist {displayColor()} Farbe

Farbe umschalten
Text 2 Farbe: {color2}

Farbe umschalten



);
}

Wenn Sie auf klicken toggleButton1, sollten Sie eine leichte Verzögerung bemerken, während sich der Status ändert. Beachten Sie, dass es auch eine Verzögerung gibt, wenn Sie auf klicken toggleButton2. Dies sollte aber nicht passieren, da die Ein-Sekunden-Pause in DisplayFarbe. Auf dieser Seite sollten die Schaltflächen unabhängig voneinander agieren können. Um dies zu erreichen, können Sie die useMemo Haken.

Sie müssen die wickeln DisplayFarbe Funktion in der useMemo Haken und Pass Farbe1 im Abhängigkeits-Array.

const displayColor = useMemo(() => {
var now = neues Date().getTime();
while (neues Date().getTime() < jetzt + 1000);
Farbe1 "blau" zurückgeben? "kühl heiß";
}, [Farbe1]);

Die useMemo Hook nimmt eine Funktion und die Abhängigkeiten als Parameter. Die useMemo Hook rendert nur, wenn sich eine seiner Abhängigkeiten ändert. Dies ist in Situationen nützlich, in denen Sie von einer API abrufen müssen.

Was als nächstes zu tun ist, nachdem Sie Hooks gelernt haben

Hooks sind eine sehr mächtige Funktion und werden häufig in React-Projekten verwendet. Sie bieten viel Optimierungspotenzial. Sie können Hooks üben, indem Sie kleine Projekte wie Formulare oder Uhrenzähler erstellen.

Es gibt andere fortgeschrittene Hooks wie useReducer, useLayoutEffect, und useDebugValue. Sie können sie anhand der offiziellen React-Dokumentation lernen.

Die 7 besten kostenlosen Tutorials zum Erlernen von React und Erstellen von Web-Apps

Kostenlose Kurse sind selten so umfassend und hilfreich – aber wir haben mehrere React-Kurse gefunden, die hervorragend sind und Ihnen den richtigen Einstieg ermöglichen.

Weiter lesen

Über den Autor