React is een van de meest populaire front-end frameworks voor JavaScript. In tegenstelling tot andere frameworks zoals Angular, is het erg ondoordacht. Het is daarom aan jou om te beslissen hoe je je React-code wilt schrijven of structureren.

Dit artikel onderzoekt enkele praktijken die u moet volgen om de prestaties van uw React-toepassing te verbeteren.

1. Functionele componenten en haken gebruiken in plaats van klassen

In Reageren kun je: gebruik klasse- of functionele componenten met haken. U moet echter vaker functionele componenten en hooks gebruiken, omdat deze resulteren in een beknoptere en leesbare code in vergelijking met klassen.

Overweeg de volgende klassecomponent die gegevens van de NASA API weergeeft.

klasse NasaData breidt React uit. bestanddeel {
 constructeur (rekwisieten) {
 super (rekwisieten);
 deze.staat = {
 gegevens: [],
 };
 }
 componentDidMount() {
 ophalen(" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {
 deze.setState({





instagram viewer


 gegevens: json,
 });
 });
 }
 veroorzaken() {
 const { data } = deze.staat;
 als (!data.length)
 opbrengst (


 Data ophalen... 
{" "}



 );
 opbrengst (
 <>
 Gegevens ophalen met de component Klasse 
{" "}
 {data.map((item) => (
{titel van het item}

 ))}
 );
 }
}

Hetzelfde onderdeel kan worden geschreven met haken.

const NasaData = () => {
 const [data, setdata] = useState (null);
 gebruikEffect(() => {
 ophalen(" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {
 setgegevens (json);
 });
 }, [gegevens]);
 opbrengst (
 <>
 Gegevens ophalen met de component Klasse 
{" "}
 {data.map((item) => (
{titel van het item}

 ))}
 );
};

Hoewel het bovenstaande codeblok hetzelfde doet als de klassecomponent, is het minder complex, minimaal en gemakkelijk te begrijpen, wat bijdraagt ​​aan een betere ontwikkelaarservaring.

2. Vermijd het gebruik van de staat (indien mogelijk)

De React-status houdt de gegevens bij die, wanneer ze worden gewijzigd, ervoor zorgen dat de React-component opnieuw wordt weergegeven. Bij het bouwen van React-applicaties, vermijd het gebruik van state zoveel mogelijk, want hoe meer state je gebruikt, hoe meer gegevens je moet bijhouden in je app.

Een manier om het gebruik van staat tot een minimum te beperken, is door het alleen te verklaren wanneer dat nodig is. Als u bijvoorbeeld gebruikersgegevens van een API ophaalt, slaat u het hele gebruikersobject op in de status in plaats van de afzonderlijke eigenschappen op te slaan.

In plaats van dit te doen:

const [gebruikersnaam, setgebruikersnaam] = useState('')
const [wachtwoord, setpassword] = useState('')

Doe dit:

const [gebruiker, setuser] = useState({})

Bij het bepalen van een projectstructuur, ga voor een componentgerichte. Dit betekent dat alle bestanden van één component in één map staan.

Als je een aan het maken was navigatiesysteem component, maak een map met de naam navigatiebalk met daarin de navigatiesysteem component zelf, het stijlblad en andere JavaSript- en activabestanden die in de component worden gebruikt.

Een enkele map die alle bestanden van een component bevat, maakt het gemakkelijk om ze opnieuw te gebruiken, te delen en te debuggen. Als u wilt zien hoe een component werkt, hoeft u maar één map te openen.

4. Vermijd het gebruik van indexen als belangrijke rekwisieten

React gebruikt sleutels om items in een array uniek te identificeren. Met sleutels kan React lokaliseren welk item is gewijzigd, toegevoegd of verwijderd uit de array.

Meestal kunt u bij het renderen van arrays de index als sleutel gebruiken.

const-items = () => {
 const arr = ["item1", "item2", "item3", "item4", "item5"];
 opbrengst (
 <>
 {arr.map((elem, index) => {
{elem}
;
 })}
 );
};

Hoewel dit soms werkt, kan het gebruik van de index als sleutel problemen veroorzaken, vooral als de lijst naar verwachting zal veranderen. Overweeg deze lijst.

const arr = ["item1", "item2", "item3", "item4", "item5"];

Momenteel is het eerste lijstitem, "Item 1” staat op index nul, maar als u een ander item aan het begin van de lijst heeft toegevoegd, wordt de “Item 1” index zou veranderen in 1 wat het gedrag van uw array verandert.

De oplossing is om een ​​unieke waarde als index te gebruiken om ervoor te zorgen dat de identiteit van het lijstitem behouden blijft.

5. Kies waar mogelijk voor fragmenten in plaats van divs

React-componenten moeten code terugsturen die in een enkele tag is verpakt, meestal a of een React-fragment. Kies waar mogelijk voor fragmenten.

Gebruik makend van vergroot de DOM-grootte, vooral bij grote projecten, want hoe meer tags of DOM-knooppunten je hebt, hoe meer geheugen je website nodig heeft en hoe meer kracht een browser gebruikt om je website te laden. Dit leidt tot een lagere paginasnelheid en mogelijk een slechte gebruikerservaring.

Een voorbeeld van het elimineren van onnodige tags gebruikt ze niet bij het retourneren van een enkel element.

const-knop = () => {
 opbrengst Weergave;
};

6. Volg naamgevingsconventies

U moet altijd PascalCase gebruiken bij het benoemen van componenten om ze te onderscheiden van andere niet-component JSX-bestanden. Bijvoorbeeld: Tekstveld, NavMenu, en Succesknop.

Gebruik camelCase voor functies die zijn gedeclareerd in React-componenten zoals: handvatInput() of showElement().

7. Vermijd herhalende code

Als u merkt dat u dubbele code schrijft, converteer deze dan naar componenten die opnieuw kunnen worden gebruikt.

Het is bijvoorbeeld logischer om een ​​component voor uw navigatiemenu te maken in plaats van herhaaldelijk de code in elke component te schrijven waarvoor een menu nodig is.

Dat is het voordeel van een op componenten gebaseerde architectuur. U kunt uw project opsplitsen in kleine componenten die u in uw hele toepassing kunt hergebruiken.

8. Objectvernietiging gebruiken voor rekwisieten

In plaats van het props-object door te geven, gebruikt u objectdestructurering om de prop-naam door te geven. Hierdoor hoeft u niet elke keer naar het rekwisietenobject te verwijzen als u het moet gebruiken.

Het volgende is bijvoorbeeld een onderdeel dat rekwisieten gebruikt zoals het is.

const Knop = (rekwisieten) => {
 opbrengst {rekwisieten.tekst};
};

Bij objectdestructurering verwijst u rechtstreeks naar de tekst.

const-knop = ({tekst}) => {
 opbrengst {tekst};
};

9. Dynamisch renderen van arrays met behulp van kaart

Gebruiken kaart() om herhaalde HTML-blokken dynamisch weer te geven. U kunt bijvoorbeeld kaart() om een ​​lijst met items in. weer te geven labels.

const-items = () => {
 const arr = ["item1", "item2", "item3", "item4", "item5"];
 opbrengst (
 <>
 {arr.map((elem, index) => {
{elem}
;
 })}
 );
 };

Voor vergelijkingsdoeleinden, hier is hoe u de lijst kunt renderen zonder kaart(). Deze aanpak is erg repetitief.

const Lijst = () => {
 opbrengst (


Item 1

Artikel2

Artikel 3

Artikel4

Artikel5




 );
};

10. Schrijf tests voor elke reactiecomponent

Schrijf tests voor de componenten die u maakt, omdat dit de kans op fouten verkleint. Testen zorgt ervoor dat de componenten zich gedragen zoals u zou verwachten. Een van de meest voorkomende testframeworks voor React is Jest, en het biedt een omgeving waar u uw tests kunt uitvoeren.

Hoewel React enigszins flexibel is in termen van hoe je het kunt gebruiken, zal het volgen van specifieke praktijken je helpen om het meeste uit je ervaring te halen.

Houd bij het volgen van deze tips uw specifieke project en doelen in gedachten; sommige zullen in bepaalde gevallen relevanter zijn dan andere.

API's consumeren in React met Fetch en Axios

Wilt u weten hoe u API's gebruikt? Inzicht in het gebruik van API's in React is een belangrijk element van het gebruik van API's.

Lees volgende

Over de auteur