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 meningslöst. Därför är det upp till dig att bestämma hur du vill skriva eller strukturera din React-kod.

Den här artikeln utforskar några metoder 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änd klass- eller funktionskomponenter med krokar. Du bör dock använda funktionella komponenter och krokar oftare eftersom de resulterar i mer kortfattad och läsbar kod jämfört med klasser.

Tänk på följande klasskomponent som visar data från NASA: s API.

klass NasaData utökar React. Komponent {
 konstruktör (rekvisita) {
 super (rekvisita);
 this.state = {
 data: [],
 };
 }
 componentDidMount() {
 hämta(" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {
 this.setState({
 data: json,
 });
 });
 }
 framställa() {
 const { data } = detta.tillstånd;





instagram viewer


 if (!data.length)
 lämna tillbaka (


 Hämtar data... 
{" "}



 );
 lämna tillbaka (
 <>
 Hämta data med Class-komponent 
{" "}
 {data.map((item) => (
{item.title}

 ))}
 );
 }
}

Samma komponent kan skrivas med hjälp av krokar.

const NasaData = () => {
 const [data, setdata] = useState (null);
 useEffect(() => {
 hämta(" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {
 setdata (json);
 });
 }, [data]);
 lämna tillbaka (
 <>
 Hämta data med Class-komponent 
{" "}
 {data.map((item) => (
{item.title}

 ))}
 );
};

Även om ovanstående kodblock gör samma sak som klasskomponenten är det mindre komplext, minimalt och lätt 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-komponenten att återrendera. När du bygger React-applikationer, undvik att använda tillstånd så mycket som möjligt eftersom ju mer tillstånd du använder, desto mer data har du att hålla reda på i din app.

Ett sätt att minimera 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åndet istället för att lagra de individuella egenskaperna.

Istället för att göra så här:

const [användarnamn, setusername] = useState('')
const [lösenord, setlösenord] = useState('')

Gör det här:

const [användare, setuser] = useState({})

När man beslutar om en projektstruktur, gå för en komponentcentrerad sådan. Detta innebär att ha alla filer som rör en komponent i en mapp.

Om du skulle skapa en Navbar komponent, skapa en mapp som heter navigeringsfältet som innehåller Navbar själva komponenten, stilmallen och andra JavaSript- och tillgångsfiler som används i komponenten.

En enda mapp som innehåller alla en komponents filer gör det enkelt att återanvända, dela och felsöka. Om du behöver se hur en komponent fungerar behöver du bara ö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 peka ut vilket objekt som har ändrats, lagts till eller tagits bort från arrayen.

För det mesta när du renderar matriser kan du använda indexet som nyckel.

const Items = () => {
 const arr = ["artikel1", "artikel2", "artikel3", "artikel4", "artikel5"];
 lämna tillbaka (
 <>
 {arr.map((elem, index) => {
{elem}
;
 })}
 );
};

Även om detta ibland fungerar, kan användningen av indexet som nyckel skapa problem, särskilt om listan förväntas ändras. Tänk på den här listan.

const arr = ["artikel1", "artikel2", "artikel3", "artikel4", "artikel5"];

För närvarande är det första listobjektet, "Artikel 1” är på index noll, men om du lade till ett annat objekt i början av listan,Artikel 1” index skulle ändras till 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 fragment istället för Divs där det är möjligt

React-komponenter måste returnera kod insvept i en enda tagg, vanligtvis en eller ett React-fragment. Du bör välja fragment där det är möjligt.

Använder sig av ökar DOM-storleken, särskilt i stora projekt eftersom ju fler taggar eller DOM-noder du har, desto mer minne behöver din webbplats och desto mer kraft använder en webbläsare för att ladda din webbplats. Detta leder till lägre sidhastighet och potentiellt dålig användarupplevelse.

Ett exempel på att eliminera onödigt taggar använder dem inte när ett enda element returneras.

const-knapp = () => {
 lämna tillbaka Visa;
};

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: Textfält, NavMeny, och Framgångsknapp.

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

7. Undvik upprepad kod

Om du märker att du skriver duplicerad kod, konvertera den till komponenter som kan återanvändas.

Till exempel är det mer meningsfullt att skapa en komponent för din navigeringsmeny istället för att upprepade gånger skriva koden i varje komponent som kräver en meny.

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

8. Använd objektdestrukturering 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 som den är.

const Button = (rekvisita) => {
 lämna tillbaka {props.text};
};

Med objektdestrukturering refererar du direkt till texten.

const Button = ({text}) => {
 lämna tillbaka {text};
};

9. Rendera arrayer dynamiskt med hjälp av karta

Använda sig av Karta() för att dynamiskt rendera upprepade HTML-block. Till exempel kan du använda Karta() för att återge en lista över objekt i taggar.

const Items = () => {
 const arr = ["artikel1", "artikel2", "artikel3", "artikel4", "artikel5"];
 lämna tillbaka (
 <>
 {arr.map((elem, index) => {
{elem}
;
 })}
 );
 };

För jämförelseändamål, här är hur du kan rendera listan utan Karta(). Detta tillvägagångssätt är mycket repetitivt.

const List = () => {
 lämna tillbaka (


Artikel 1

Artikel 2

Artikel 3

Artikel 4

Artikel 5




 );
};

10. Skriv tester för varje reaktionskomponent

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

Även om React är något flexibelt när det gäller hur du kan använda det, kommer att följa specifika metoder hjälpa dig att få ut det mesta av din upplevelse.

När du följer dessa tips, tänk på just ditt projekt och dina mål; vissa kommer att vara mer relevanta i vissa fall än andra.

Hur man konsumerar API: er i React med hjälp av Fetch och Axios

Vill du veta hur man använder API: er? Att förstå hur man konsumerar API: er i React är en viktig del av API-användning.

Läs Nästa

Om författaren