Być może wiesz już o haczykach Reacta, a nawet o tym, jakie podstawowe haki oferuje framework. Hooki pozwalają zarządzać stanem i innymi funkcjami bez konieczności pisania klasy. Podstawowe haki to useState, użyjEfekt, oraz useContext. W tym artykule dowiesz się o kilku dodatkowych hookach, które dodają bardziej skomplikowanego zachowania.

Dodatkowe haki, których będziesz się uczyć, to użyjRef oraz użyj Memo.

użyjRef

ten użyjRef funkcja zwraca zmienny obiekt ref i inicjuje jego .obecny właściwość do przekazanego argumentu. Ludzie często mylą użycie użyjRef haczyk z useState hak. Możesz poinstruować ten hak, aby przechowywał odniesienie do an element HTML. Korzystając z tego odniesienia, możesz łatwo manipulować tym elementem.

ten użyjRef hak ma w sobie tylko jedną właściwość: .obecny. React nie renderuje ponownie strony, gdy zmienia się jej element. Nie jest również ponownie renderowany, jeśli zmienisz wartość .obecny własność. Rozumiemy użycie tego haka na przykładzie:

import React, { useState, useRef } z 'react';





instagram viewer


eksportuj funkcję domyślną App() {
const count = useRef (null);
const [liczba, setNumber] = useState (0);
const checkNumber = () => {
if (liczba.bieżąca.wartość < 10) {
count.current.style.backgroundColor = "czerwony";
} w przeciwnym razie {
count.current.style.backgroundColor = "zielony";
}
};
powrót (


Wpisz liczbę większą niż 10

ref={liczba}
type="tekst"
wartość={liczba}
onChange={(e) => setNumber (e.target.value)}
/>
 checkNumber()}>Kliknij



);
}

W powyższym kodzie kolor elementu wejściowego zmienia się zgodnie z liczbą wprowadzoną w polu wprowadzania. Najpierw przypisuje wynik z użyjRef() zaczep do liczyć zmienny. Są dwa elementy: wejście i przycisk. Element input ma wartość numer i ref właściwość znacznika wejściowego to liczyć aby dopasować zmienną.

Po kliknięciu przycisku Sprawdź numer() funkcja zostaje wywołana. Ta funkcja sprawdza, czy wartość numer jest większa niż 10. To wtedy ustawia kolor tła elementu wejściowego za pomocą liczba.bieżący.styl.tłoKolor własność.

Związane z: Podstawy CSS: praca z kolorami

użyj Memo

Hak useMemo ponownie obliczy zbuforowaną wartość, gdy zmieni się jakakolwiek z jego zależności. Ta optymalizacja pomaga uniknąć kosztownych obliczeń przy każdym renderowaniu.

Składnia użyj Memo hak jest następujący:

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

Dla lepszego zrozumienia rozważmy przykład. Poniższy kod przełącza kolory dwóch nagłówków. Nazywa useState hak, aby śledzić ich wartości. Funkcja pokazuje, czy kolor jest ciepły czy zimny, zgodnie z jego wartością. Przed zwróceniem statusu koloru pojawia się pętla while, która zatrzymuje się na około jedną sekundę. Służy to do celów demonstracyjnych, aby wyjaśnić korzyści płynące z użyj Memo hak.

import React, { useState, useMemo } z 'react';
eksportuj funkcję domyślną App() {
const [kolor1, setColor1] = useState("niebieski");
const [kolor2, setColor2] = useState("zielony");
const toggleColor1 = () => {
zwróć kolor1 "niebieski"? setColor1("czerwony"): setColor1("niebieski");
};
const toggleColor2 = () => {
kolor2 „zielony”? setColor2("pomarańczowy"): setColor2("zielony");
};
const displayColor = () => {
var now = new Date().getTime();
while (nowa Date().getTime() < teraz + 1000);
zwróć kolor1 "niebieski"? „fajny”: „gorący”;
};
powrót (


Kolor tekstu 1: {color1}

Jest to kolor {displayColor()}

Przełącz kolor
Kolor tekstu 2: {color2}

Przełącz kolor



);
}

Po kliknięciu toggleButton1, powinieneś zauważyć niewielkie opóźnienie podczas zmiany stanu. Zauważ, że po kliknięciu występuje również opóźnienie toggleButton2. Ale to nie powinno mieć miejsca, ponieważ jednosekundowa pauza następuje w kolor wyświetlacza. Na tej stronie przyciski powinny mieć możliwość niezależnego działania. Aby to osiągnąć, możesz użyć użyj Memo hak.

Musisz owinąć kolor wyświetlacza funkcja w użyj Memo haczyk i podanie kolor1 w tablicy zależności.

const displayColor = useMemo(() => {
var now = new Date().getTime();
while (nowa Date().getTime() < teraz + 1000);
zwróć kolor1 "niebieski"? „fajny”: „gorący”;
}, [kolor1]);

ten użyj Memo hook przyjmuje funkcję i zależności jako parametry. ten użyj Memo hook będzie renderowany tylko wtedy, gdy zmieni się jedna z jego zależności. Jest to przydatne w sytuacjach, gdy musisz pobrać z API.

Co dalej po nauczeniu się hooków

Hooki są bardzo potężną funkcją i są powszechnie używane w projektach React. Dają duży potencjał optymalizacji. Możesz ćwiczyć haki, budując małe projekty, takie jak formularze lub liczniki zegarów.

Istnieją inne zaawansowane haki, takie jak użyjReduktora, useLayoutEffect, oraz useDebugValue. Możesz się ich nauczyć, odwołując się do oficjalnej dokumentacji Reacta.

Unnati Bamania (10 opublikowanych artykułów)

Unnati to entuzjastyczny programista full stack. Uwielbia budować projekty w różnych językach programowania. W wolnym czasie uwielbia grać na gitarze i jest entuzjastką gotowania.

Więcej od Unnati Bamania