Når du arbejder på store React-projekter, er det afgørende at have en velorganiseret kodebase for bedre vedligeholdelse og skalerbarhed.
I denne artikel vil vi dykke ned i bedste praksis for at organisere din kildekode i React med fokus på at bruge React Hooks og Context.
Brug af React Hooks til statsforvaltning
React Hooks er en samling funktioner, der giver dig mulighed for at bruge tilstand og andre React-funktioner uden at bruge klasser. Dette hjælper med at skrive mere kortfattet og læsbar kode. For eksempel kan vi bruge useState Hook til at administrere tilstand i en komponent.
Her er et eksempel:
Kombination af ingredienser
En af fordelene ved React er muligheden for at genbruge komponenter. For at øge organisationen kan vi bruge mindre komponenter til at bygge større komponenter.
Dette er med til at nedbryde arbejdet og gøre koden nem at vedligeholde. For eksempel kan vi oprette en <Button>
komponent til brug flere steder i vores applikation:
Brug af kontekst til at styre global tilstand
Kontekst er en mekanisme i React, der giver os mulighed for at dele data mellem underordnede komponenter uden at gå gennem overordnede komponenter. Dette undgår at overføre dataattributter på tværs af flere komponentniveauer og hjælper med at reducere kodekompleksiteten.
Her er et eksempel på brug af kontekst til at dele det aktuelle sprog i applikationen:
Ovenfor er nogle bedste fremgangsmåder til at organisere React-kildekode ved hjælp af React Hooks og Context.