Je weet misschien al over React-haken en zelfs welke basishaken het framework biedt. Met Hooks kun je status en andere functies beheren zonder dat je een klasse hoeft te schrijven. De basishaken zijn: gebruikStatus, gebruikEffect, en gebruikContext. In dit artikel leer je over enkele extra hooks die ingewikkelder gedrag toevoegen.

De extra haken die je gaat leren zijn: gebruikRef en gebruikMemo.

gebruikRef

De gebruikRef functie retourneert een veranderlijk ref-object en initialiseert zijn .huidig eigenschap toe aan het doorgegeven argument. Mensen verwarren vaak het gebruik van gebruikRef haak met gebruikStatus haak. Je kunt deze hook instrueren om de referentie van een vast te houden HTML-element. Met behulp van deze referentie kunt u dat element gemakkelijk manipuleren.

De gebruikRef hook heeft maar één eigenschap: .huidig. React geeft de pagina niet opnieuw weer wanneer het element verandert. Het wordt ook niet opnieuw weergegeven als u de waarde van de .huidig eigendom. Laten we het gebruik van deze haak met een voorbeeld begrijpen:

import React, { useState, useRef } van 'react';
export standaardfunctie App() {
const count = useRef (null);
const [getal, setNumber] = useState (0);
const checkNumber = () => {
if (count.current.value < 10) {
count.current.style.backgroundColor = "rood";
} anders {
count.current.style.backgroundColor = "groen";
}
};
opbrengst (


Voer een getal in groter dan 10

ref={telling}
typ = "tekst"
waarde={getal}
onChange={(e) => setNumber (e.target.value)}
/>
 checkNumber()}>Klik



);
}

In de bovenstaande code verandert de kleur van het invoerelement volgens het nummer dat u invoert in het invoervak. Ten eerste wijst het het resultaat toe van de gebruikRef() haak aan de Graaf variabele. Er zijn twee elementen: invoer en de knop. Het invoerelement heeft de waarde van de nummer en de ref eigenschap van de invoertag is Graaf om de variabele te matchen.

Wanneer u op de knop klikt, wordt de checkNumber() functie wordt aangeroepen. Deze functie controleert of de waarde van de nummer groter is dan 10. Het dan stelt de achtergrondkleur in van het invoerelement met behulp van de count.current.style.backgroundColor eigendom.

Verwant: Basisprincipes van CSS: werken met kleuren

gebruikMemo

De useMemo-hook zal een in de cache opgeslagen waarde opnieuw berekenen wanneer een van zijn afhankelijkheden verandert. Deze optimalisatie helpt om dure berekeningen op elke render te vermijden.

De syntaxis van de gebruikMemo haak is als volgt:

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

Laten we voor een beter begrip een voorbeeld bekijken. De onderstaande code schakelt de kleuren van twee koppen. Het noemt de gebruikStatus haak om hun waarden bij te houden. Een functie laat zien of de kleur warm of koud is, afhankelijk van de waarde. Voordat de status van de kleur terugkeert, is er een while-lus die ongeveer een seconde pauzeert. Dit is voor demonstratiedoeleinden, om het voordeel van de gebruikMemo haak.

import React, { useState, useMemo } van 'react';
export standaardfunctie App() {
const [color1, setColor1] = useState("blue");
const [color2, setColor2] = useState("green");
const toggleColor1 = () => {
retour kleur1 "blauw"? setColor1("rood"): setColor1("blauw");
};
const toggleColor2 = () => {
kleur2 "groen"? setColor2("oranje"): setColor2("groen");
};
const displayColor = () => {
var nu = nieuwe Datum().getTime();
while (nieuwe Date().getTime() < nu + 1000);
retour kleur1 "blauw"? "koel": "heet";
};
opbrengst (


Tekst 1 kleur: {color1}

Het is {displayColor()} kleur

Wisselen van kleur
Tekst 2 kleur: {color2}

Wisselen van kleur



);
}

Wanneer u klikt op toggleKnop1, zou u een kleine vertraging moeten opmerken terwijl de status verandert. Merk op dat er ook een vertraging is wanneer u op. klikt toggleKnop2. Maar dit mag niet gebeuren, aangezien de pauze van één seconde plaatsvindt in displayKleur. Op deze pagina moeten de knoppen onafhankelijk van elkaar kunnen werken. Om dit te bereiken, kunt u de gebruikMemo haak.

Je moet de inpakken displayKleur functie in de gebruikMemo haak en pas kleur1 in de afhankelijkheidsreeks.

const displayColor = useMemo(() => {
var nu = nieuwe Datum().getTime();
while (nieuwe Date().getTime() < nu + 1000);
retour kleur1 "blauw"? "koel": "heet";
}, [kleur1]);

De gebruikMemo hook neemt een functie en de afhankelijkheden als parameters. De gebruikMemo hook wordt alleen weergegeven als een van zijn afhankelijkheden verandert. Het is handig in situaties waarin u moet ophalen van een API.

Wat te doen na het leren van haken

Haken zijn een zeer krachtige functie en worden vaak gebruikt in React-projecten. Ze bieden veel potentieel voor optimalisatie. Je kunt haken oefenen door kleine projecten zoals formulieren of klokkentellers te bouwen.

Er zijn andere geavanceerde haken zoals: gebruikReducer, gebruikLayoutEffect, en useDebugValue. Je kunt ze leren door te verwijzen naar de officiële React-documentatie.

Unnati Bamania (10 artikelen gepubliceerd)

Unnati is een enthousiaste full-stack developer. Ze houdt ervan om projecten te bouwen met behulp van verschillende programmeertalen. In haar vrije tijd speelt ze graag gitaar en is ze een kookliefhebber.

Meer van Unnati Bamania