React är ett av de mest populära front-end-ramverken för JavaScript. Till skillnad från andra ramverk som Angular är det väldigt överskådligt. Så det är upp till dig att bestämma hur du vill skriva eller strukturera din React-kod.

Den här artikeln utforskar några metoder som du bör följa för att förbättra prestandan för din React-applikation.

1. Använda funktionella komponenter och krokar istället för klasser

I React kan du använda klasser eller funktionella komponenter med krokar. Du bör dock använda funktionella komponenter och krokar oftare eftersom de resulterar i mer kortfattad och läsbar kod än klasser.

Även om ovanstående kodblock gör samma sak som en klasskomponent är det mindre komplext, minimalt och lättare att förstå vilket bidrar till en bättre utvecklarupplevelse.

2. Undvik att använda State (om möjligt)

React state håller reda på data som när de ändras utlöser React-komponenter att återrendera dem. När du bygger en React-applikation, undvik att använda tillstånd så mycket som möjligt, för ju mer tillstånd du använder, desto mer data har du att hålla reda på i din app.

Ett sätt att minska användningen av staten är att deklarera det endast när det är nödvändigt. Om du till exempel hämtar användardata från ett API, lagrar du hela användarobjektet i tillstånd istället för att lagra enskilda egenskaper.

3. Ordna filer relaterade till samma komponent i en enda mapp

När du bestämmer dig för en projektstruktur, välj en komponentcentrerad. Detta innebär att ha alla filer relaterade till en komponent i en mapp.

Om du skapade en navbar-komponent, skapa en mapp som heter navbar som innehåller själva navbar-komponenten, stilmallar och andra JavaScript- och egenskapsfiler som används i komponenten.

En enda mapp som innehåller alla komponentens filer gör det enkelt att återanvända, dela och felsöka. Om du behöver se hur en komponent fungerar är allt du behöver göra att öppna en enda mapp.

4. Undvik att använda index som nyckelrekvisita

React använder nycklar för att unikt identifiera objekt i en array. Med nycklar kan React indikera vilket objekt som har ändrats, lagts till eller tagits bort från arrayen.

För närvarande är det första listobjektet, “objekt 1” vid index noll, men om du lade till ett annat objekt i början av listan kommer “objekt 1” att ändras till index 1 vilket ändrar beteendet för din array.

Lösningen är att använda ett unikt värde som index för att säkerställa att identiteten för listobjektet bibehålls.

5. Välj där det är möjligt stycken istället för div

React-komponenter måste returnera kod insvept i en tagg, vanligtvis i en <div> eller en react-sektion. Om möjligt bör du välja bitar.

Att använda <div> ökar storleken på DOM, speciellt i stora projekt eftersom ju fler taggar eller DOM-noder du har, desto mer minne kommer din webbplats att behöva och desto mer minne behöver en webbläsare för att ladda din webbplats. Ju mer kraft kommer den att använda. Detta resulterar i lägre sidhastighet och potentiellt dålig användarupplevelse.

Ett exempel på att ta bort onödiga <div>-taggar är att inte använda dem när du returnerar ett enskilt element.

6. Följ namnkonventioner

Du bör alltid använda PascalCase när du namnger komponenter för att skilja dem från andra icke-komponent JSX-filer. Till exempel: TextField, NavMenu och SuccessButton.

Använd camelCase för funktioner som deklareras inuti React-komponenter som handleInput() eller showElement().

7. Undvik dubbletter av kod

Om du ser att du skriver dubblettkod, konvertera den till komponenter som kan återanvändas.

Till exempel är det mer vettigt att skapa en komponent för din navigeringsmeny än att skriva kod om och om igen i varje komponent som kräver en meny.

Detta är fördelen med en komponentbaserad arkitektur. Du kan dela upp ditt projekt i mindre komponenter som du kan återanvända i din applikation.

8. Använd Object Destructing för rekvisita

Istället för att skicka props-objektet, använd objektdestrukturering för att skicka rekvisitens namn. Detta försvinner behovet av att referera till rekvisitaobjektet varje gång du behöver använda det.

Till exempel är följande en komponent som använder rekvisita.

9. Rendera array dynamiskt med hjälp av karta

Använd map() för att dynamiskt rendera upprepade HTML-block. Du kan till exempel använda map() för att rendera en lista med objekt i en <li>-tagg.

10. Skriv tester för varje reaktionskomponent

Skriv tester för komponenterna du bygger då det minimerar risken för fel. Testning säkerställer att komponenter fungerar som du förväntar dig. Ett av de vanligaste testramverken för React är Jest, och det ger en miljö där du kan utföra dina tester.

Leave a Reply

Your email address will not be published. Required fields are marked *