React sleutels, ja! Je hebt ze nodig, maar waarom precies?

Er is nog één ding waar je aan moet denken en dat is de React Sleutel attribuut, moet elk element van de gerenderde lijst dit attribuut hebben. Dit concept is een van de eerste dingen die elke front-end ontwikkelaar leert over React aan het begin van hun reis. Laten we nu eens wat dieper graven om te onderzoeken waarom dit het geval is en wanneer we wat kortere wegen kunnen nemen.

Waarom hebben we deze sleutelattribuut nodig?

Het eenvoudigste antwoord hier zou zijn "om re-renders te optimaliseren", maar het meer volledige antwoord moet op zijn minst het concept van React Afstemming. Dit is het proces van uitzoeken hoe de UI op de meest efficiënte manier kan worden bijgewerkt. Om dat snel te doen, React moet beslissen welke delen van de boom van elementen bijgewerkt moeten worden en welke niet. Het punt is dat er veel elementen in het DOM kunnen zijn en het vergelijken van elk van hen om te beslissen welke moet worden bijgewerkt is behoorlijk duur. Om dit te optimaliseren, React implementeert het diffing-algoritme dat gebaseerd is op twee aannames:

1. Twee verschillende soorten elementen zullen nooit hetzelfde zijn - dus geef ze opnieuw weer.
2. Ontwikkelaars kunnen handmatig helpen dat proces te optimaliseren via sleutelattributen, zodat de elementen, zelfs als hun volgorde is veranderd, sneller kunnen worden gelokaliseerd en vergeleken.

Op basis daarvan kunnen we concluderen dat elke React sleutel moeten ook uniek zijn (binnen de lijst van elementen, niet globaal) en stabiel (mogen niet veranderen). Maar wat kan er gebeuren als ze niet tat zijn?

Uniciteit, stabiliteit en array-index

Zoals we al eerder zeiden, React toetsen moet stabiel en uniek zijn. De eenvoudigste manier om dit te bereiken is door een unieke ID te gebruiken (bijvoorbeeld uit een database) en deze door te geven aan elk element bij het mappen van een array, eenvoudig. Maar hoe zit het met situaties waarin we geen ID, naam of andere unieke identifiers hebben om aan elk element door te geven? Nou, als we niets doorgeven als sleutel, React zal standaard de huidige array-index nemen (aangezien deze uniek is binnen die lijst) om het voor ons af te handelen, maar het zal ons ook een mooie foutmelding geven in de console:

Waarom is dat het geval? Het antwoord is dat de array-index niet stabiel is. Als de volgorde van de elementen verandert, verandert elk van de sleutels en hebben we een probleem. Als React In een situatie waar de volgorde in een lijst van elementen werd gewijzigd, zal het nog steeds proberen om ze te vergelijken aan de hand van de sleutels, wat betekent dat elke vergelijking zal eindigen in het opnieuw opbouwen van een component en, als gevolg daarvan, de hele lijst opnieuw zal worden opgebouwd. Bovendien kunnen we enkele onverwachte problemen tegenkomen, zoals component status updates voor elementen als ongecontroleerde ingangen en andere magische moeilijk te debuggen problemen.

Uitzonderingen

Laten we teruggaan naar de array-index. Als je het gebruikt als een React sleutel zo problematisch kan zijn, waarom React standaard zal gebruiken? Is er een use-case waarbij dat wel mag? Het antwoord is ja, de use-case hiervoor is statische lijsten. Als je zeker weet dat een lijst die je rendert nooit van volgorde zal veranderen, is het veilig om array-index te gebruiken, maar onthoud dat als je unieke identifiers hebt, het nog steeds beter is om die in plaats daarvan te gebruiken. Je kunt ook opmerken dat het doorgeven van indexen als sleutels de React foutmelding verdwijnen, terwijl tegelijkertijd sommige externe linters een fout of waarschuwing weergeven. Dit is te wijten aan het feit dat het expliciete gebruik van indexen als sleutels wordt beschouwd als een slechte gewoonte en sommige linters kunnen dit behandelen als een fout, terwijl React zelf beschouwt het als een "de ontwikkelaars weten wat ze doen" situatie - dus doe dat niet tenzij je echt weet wat je doet. Een paar voorbeelden van wanneer het in orde kan zijn om die uitzondering te gebruiken, zijn een dropdown met een statische lijst met knoppen of het weergeven van een lijst met elementen met de adresgegevens van je bedrijf.

Een alternatief voor een dataset-gebaseerde sleutel

Laten we zeggen dat geen van de bovenstaande opties een optie voor ons is. We moeten bijvoorbeeld een lijst met elementen weergeven op basis van de array van strings die gedupliceerd kan worden, maar ook opnieuw geordend kan worden. In dit geval kunnen we geen van de strings gebruiken omdat ze niet uniek zijn (dit kan ook een aantal magische bugs veroorzaken) en de array-index is niet goed genoeg omdat we de volgorde van de elementen zullen veranderen. Het laatste waar we op kunnen vertrouwen in dit soort situaties is het gebruik van externe identifiers. Onthoud dat het stabiel moet zijn, dus we kunnen niet zomaar Math.random() gebruiken. Er zijn enkele NPM-pakketten die we in zulke gevallen kunnen gebruiken, bijvoorbeeld de "uuid" pakket. Hulpmiddelen als deze kunnen ons helpen om onze lijstsleutels stabiel en uniek te houden, zelfs als we niet de juiste identifiers in onze gegevensset kunnen vinden. We moeten overwegen om (indien mogelijk) eerst database-ID en array-index te gebruiken om het aantal pakketten dat gebruikt wordt door onze project.

Om het af te ronden

• Elk element in de lijst van React elementen moeten een uniek, stabiel sleuteleigenschap hebben,
• React toetsen worden gebruikt om de Afstemmingsproces en onnodig heropbouwen van elementen op de lijsten voorkomen,
• De beste bron voor sleutels is de unieke ID van gegevensinvoer (bijvoorbeeld uit de database),
• Je kunt de array-index als sleutel gebruiken, maar alleen voor een statische lijst waarvan de volgorde niet verandert,
• Als er geen andere manier is om stabiele en unieke sleutels te krijgen, overweeg dan om een aantal externe ID-providers te gebruiken, bijvoorbeeld het pakket "uuid".

Lees meer:

Waarom je (waarschijnlijk) Typescript zou moeten gebruiken

Hoe help je een project niet om zeep met slechte codeerpraktijken?

Strategieën voor het ophalen van gegevens in NextJS