React er en af ​​de mest populære front-end frameworks til JavaScript. I modsætning til andre rammer som Angular, er det meget meningsløst. Derfor er det op til dig at bestemme, hvordan du vil skrive eller strukturere din React-kode.

Denne artikel udforsker nogle fremgangsmåder, du bør følge for at forbedre ydeevnen af ​​din React-applikation.

1. Brug af funktionelle komponenter og kroge i stedet for klasser

I React kan du brug klasse eller funktionelle komponenter med kroge. Du bør dog bruge funktionelle komponenter og kroge oftere, da de resulterer i mere kortfattet og læsbar kode sammenlignet med klasser.

Overvej følgende klassekomponent, der viser data fra NASA API.

klasse NasaData udvider React. Komponent {
 konstruktør (rekvisitter) {
 super (rekvisitter);
 denne.stat = {
 data: [],
 };
 }
 componentDidMount() {
 hente(" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {
 this.setState({
 data: json,
 });
 });
 }
 render() {
 const { data } = denne.tilstand;





instagram viewer


 if (!data.length)
 Vend tilbage (


 Henter data... 
{" "}



 );
 Vend tilbage (
 <>
 Hent data ved hjælp af klassekomponent 
{" "}
 {data.map((item) => (
{item.title}

 ))}
 );
 }
}

Den samme komponent kan skrives ved hjælp af kroge.

const NasaData = () => {
 const [data, sætdata] = useState (nul);
 useEffect(() => {
 hente(" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {
 sætdata (json);
 });
 }, [data]);
 Vend tilbage (
 <>
 Hent data ved hjælp af klassekomponent 
{" "}
 {data.map((item) => (
{item.title}

 ))}
 );
};

Selvom ovenstående kodeblok gør det samme som klassekomponenten, er den mindre kompleks, minimal og let at forstå, hvilket bidrager til en bedre udvikleroplevelse.

2. Undgå at bruge tilstand (hvis muligt)

React-tilstand holder styr på de data, som, når de ændres, udløser React-komponenten til at gengive. Når du bygger React-applikationer, skal du undgå at bruge tilstand så meget som muligt, da jo mere tilstand du bruger, jo flere data skal du holde styr på på tværs af din app.

En måde at minimere brugen af ​​staten er ved kun at erklære den, når det er nødvendigt. For eksempel, hvis du henter brugerdata fra en API, skal du gemme hele brugerobjektet i tilstanden i stedet for at gemme de individuelle egenskaber.

I stedet for at gøre dette:

const [brugernavn, sætbrugernavn] = useState('')
const [adgangskode, sætadgangskode] = useState('')

Gør dette:

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

Når du skal beslutte dig for en projektstruktur, gå efter en komponent-centreret en. Det betyder at have alle filerne vedrørende én komponent i én mappe.

Hvis du oprettede en Navbar komponent, skal du oprette en mappe kaldet navbar indeholdende Navbar selve komponenten, typografiarket og andre JavaSript- og aktivfiler, der bruges i komponenten.

En enkelt mappe, der indeholder alle en komponents filer, gør det nemt at genbruge, dele og fejlfinde. Hvis du har brug for at se, hvordan en komponent fungerer, behøver du kun at åbne én enkelt mappe.

4. Undgå at bruge indekser som nøglerekvisitter

React bruger nøgler til entydigt at identificere elementer i et array. Med nøgler kan React lokalisere, hvilket element der er blevet ændret, tilføjet eller fjernet fra arrayet.

Det meste af tiden, når du renderer arrays, kan du bruge indekset som nøglen.

const Items = () => {
 const arr = ["vare1", "vare2", "vare3", "vare4", "vare5"];
 Vend tilbage (
 <>
 {arr.map((elem, indeks) => {
{elem}
;
 })}
 );
};

Selvom dette nogle gange virker, kan brug af indekset som en nøgle give problemer, især hvis listen forventes at ændre sig. Overvej denne liste.

const arr = ["vare1", "vare2", "vare3", "vare4", "vare5"];

I øjeblikket er det første listepunkt, "Vare 1" er ved indeks nul, men hvis du tilføjede et andet element i begyndelsen af ​​listen, vil "Vare 1” indeks ændres til 1, hvilket ændrer adfærden for dit array.

Løsningen er at bruge en unik værdi som indeks for at sikre, at identiteten af ​​listeelementet vedligeholdes.

5. Vælg Fragments i stedet for Divs, hvor det er muligt

React-komponenter skal returnere kode pakket ind i et enkelt tag, normalt en eller et React-fragment. Du bør vælge fragmenter, hvor det er muligt.

Ved brug af øger DOM-størrelsen, især i store projekter, da jo flere tags eller DOM-noder du har, jo mere hukommelse har din hjemmeside brug for, og jo mere strøm bruger en browser til at indlæse din hjemmeside. Dette fører til lavere sidehastighed og potentielt dårlig brugeroplevelse.

Et eksempel på at eliminere unødvendige tags bruger dem ikke, når de returnerer et enkelt element.

const knap = () => {
 Vend tilbage Skærm;
};

6. Følg navnekonventionerne

Du bør altid bruge PascalCase, når du navngiver komponenter for at adskille dem fra andre ikke-komponent JSX-filer. For eksempel: Tekstfelt, NavMenu, og Succesknap.

Brug camelCase til funktioner, der er deklareret inde i React-komponenter som handleInput() eller showElement().

7. Undgå gentagen kode

Hvis du bemærker, at du skriver duplikeret kode, skal du konvertere den til komponenter, der kan genbruges.

For eksempel giver det mere mening at oprette en komponent til din navigationsmenu i stedet for gentagne gange at skrive koden i hver komponent, der kræver en menu.

Det er fordelen ved en komponentbaseret arkitektur. Du kan opdele dit projekt i små komponenter, som du kan genbruge på tværs af din applikation.

8. Brug objektdestrukturering til rekvisitter

I stedet for at videregive rekvisitterobjektet, skal du bruge objektdestrukturering til at videregive rekvisitnavnet. Dette fjerner behovet for at henvise til rekvisitobjektet, hver gang du skal bruge det.

For eksempel er følgende en komponent, der bruger rekvisitter, som den er.

const knap = (rekvisitter) => {
 Vend tilbage {props.text};
};

Med objektdestrukturering refererer du direkte til teksten.

const-knap = ({tekst}) => {
 Vend tilbage {tekst};
};

9. Render arrays dynamisk ved hjælp af kort

Brug kort() til dynamisk at gengive gentagne HTML-blokke. Du kan f.eks. bruge kort() for at gengive en liste over elementer i tags.

const Items = () => {
 const arr = ["vare1", "vare2", "vare3", "vare4", "vare5"];
 Vend tilbage (
 <>
 {arr.map((elem, indeks) => {
{elem}
;
 })}
 );
 };

Til sammenligningsformål er her, hvordan du kan gengive listen uden kort(). Denne tilgang er meget gentagende.

const List = () => {
 Vend tilbage (


Vare 1

Vare 2

Vare 3

Punkt 4

Vare 5




 );
};

10. Skriv test for hver React-komponent

Skriv test for de komponenter, du opretter, da det reducerer risikoen for fejl. Test sikrer, at komponenterne opfører sig, som du ville forvente. Et af de mest almindelige testrammer for React er Jest, og det giver et miljø, hvor du kan udføre dine tests.

Selvom React er noget fleksibelt med hensyn til, hvordan du kan bruge det, vil det at følge specifik praksis hjælpe dig med at få mest muligt ud af din oplevelse.

Når du følger disse tips, så husk dit særlige projekt og dine mål; nogle vil være mere relevante i visse tilfælde end andre.

Sådan bruger du API'er i React ved hjælp af Fetch og Axios

Vil du vide, hvordan man bruger API'er? At forstå, hvordan man bruger API'er i React er et nøgleelement i API-brug.

Læs Næste

Om forfatteren