Poate știți deja despre cârligele React și chiar despre cârligele de bază oferite de cadrul. Cârligele vă permit să gestionați starea și alte funcții fără a fi nevoie să scrieți o clasă. Cârligele de bază sunt useState, useEffect, și foloseșteContext. În acest articol, veți afla despre câteva cârlige suplimentare care adaugă un comportament mai complicat.

Cârligele suplimentare pe care le veți învăța sunt utilizareRef și foloseșteMemo.

utilizareRef

The utilizareRef funcția returnează un obiect ref mutabil și îl inițializează .actual proprietate la argumentul transmis. Oamenii confundă adesea folosirea utilizareRef cârlig cu useState cârlig. Puteți instrui acest cârlig să țină referința unui element HTML. Folosind această referință, puteți manipula cu ușurință acel element.

The utilizareRef cârligul are o singură proprietate: .actual. React nu redă din nou pagina când elementul acesteia se schimbă. Nici nu se redă din nou dacă modificați valoarea .actual proprietate. Să înțelegem utilizarea acestui cârlig cu un exemplu:

import React, { useState, useRef } din 'react';
export funcția implicită App() {
const count = useRef (null);
const [număr, setNumăr] = useState (0);
const checkNumber = () => {
dacă (număr.valoare.actuală < 10) {
count.current.style.backgroundColor = „roșu”;
} altfel {
count.current.style.backgroundColor = "verde";
}
};
întoarcere (


Introduceți un număr mai mare de 10

ref={count}
tip="text"
valoare={număr}
onChange={(e) => setNumber (e.target.value)}
/>
 checkNumber()}>Clic



);
}

În codul de mai sus, culoarea elementului de intrare se modifică în funcție de numărul pe care îl introduceți în caseta de introducere. În primul rând, atribuie rezultatul din useRef() cârlig la numara variabil. Există două elemente: intrare și butonul. Elementul de intrare are valoarea număr si ref proprietatea etichetei de intrare este numara pentru a se potrivi cu variabila.

Când faceți clic pe butonul, verifică numărul() funcția este apelată. Această funcție verifică dacă valoarea lui număr este mai mare de 10. Atunci setează culoarea de fundal a elementului de intrare folosind numără.stil.actual.fondul.Culoare proprietate.

Legate de: Fundamentele CSS: Lucrul cu culorile

foloseșteMemo

Cârligul useMemo va recalcula o valoare din cache atunci când oricare dintre dependențele sale se schimbă. Această optimizare ajută la evitarea calculelor costisitoare la fiecare randare.

Sintaxa lui foloseșteMemo cârligul este după cum urmează:

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

Pentru o mai bună înțelegere, să luăm în considerare un exemplu. Codul de mai jos comută culorile a două titluri. Se numeste useState cârlig pentru a ține evidența valorilor lor. O funcție arată dacă culoarea este caldă sau rece în funcție de valoarea sa. Înainte de a reveni la starea culorii, există o buclă while care se întrerupe timp de aproximativ o secundă. Acesta este în scop demonstrativ, pentru a explica beneficiile foloseșteMemo cârlig.

import React, { useState, useMemo } din 'react';
export funcția implicită App() {
const [culoare1, setColor1] = useState("albastru");
const [culoare2, setColor2] = useState("verde");
const toggleColor1 = () => {
returnează culoarea1 „albastru”? setColor1(„roșu”): setColor1(„albastru”);
};
const toggleColor2 = () => {
culoare2 „verde”? setColor2(„portocaliu”): setColor2(„verde”);
};
const displayColor = () => {
var acum = data noua().getTime();
while (new Date().getTime() < acum + 1000);
returnează culoarea1 „albastru”? „rece”: „fierbinte”;
};
întoarcere (


Text 1 culoare: {color1}

Este culoarea {displayColor()}

Comutați culoarea
Culoare text 2: {color2}

Comutați culoarea



);
}

Când faceți clic pe toggleButton1, ar trebui să observați o ușoară întârziere în timp ce starea se schimbă. Observați că există și o întârziere când faceți clic pe toggleButton2. Dar acest lucru nu ar trebui să se întâmple, deoarece pauza de o secundă are loc în displayColor. Pe această pagină, butoanele ar trebui să poată acționa independent. Pentru a realiza acest lucru, puteți utiliza foloseșteMemo cârlig.

Trebuie să înfășurați displayColor funcţia în foloseșteMemo cârlig și trece culoare1 în tabloul de dependențe.

const displayColor = useMemo(() => {
var acum = data noua().getTime();
while (new Date().getTime() < acum + 1000);
returnează culoarea1 „albastru”? „rece”: „fierbinte”;
}, [culoare1]);

The foloseșteMemo hook ia o funcție și dependențele ca parametri. The foloseșteMemo hook va fi redat numai atunci când una dintre dependențele sale se schimbă. Este util în situațiile în care trebuie să preluați de la un API.

Ce să faci în continuare după Learning Hooks

Cârligele sunt o caracteristică foarte puternică și sunt utilizate în mod obișnuit în proiectele React. Ele oferă un mare potențial de optimizare. Puteți exersa cârlige prin construirea de proiecte mici, cum ar fi formulare sau contoare de ceas.

Există și alte cârlige avansate precum utilizați Reducer, useLayoutEffect, și useDebugValue. Le puteți afla făcând referire la documentația oficială React.

Unnati Bamania (10 articole publicate)

Unnati este un dezvoltator entuziast full stack. Îi place să construiască proiecte folosind diverse limbaje de programare. În timpul liber, îi place să cânte la chitară și este o pasionată de gătit.

Mai multe de la Unnati Bamania