ReactJS bedste praksis i 2019

[opdatering, 22. maj, 2019] - Føj endnu en bedste praksis til listen. Se nedenunder.

[opdatering 19. maj 2019] - Vi tilføjede en ny artikel om Redux og Redux-Thunk. Enkelt forklaret med masser af eksempler.

[opdatering 23. juli 2019] - På grund af mange anmodninger tilføjer vi en ny artikel om ReactJS ANTIpatterns. Linket vil blive sendt her. Understøtt venligst med et klap. Tak skal du have!

1. Velkommen, ReactJS

I de sidste fem år er ReactJS hurtigt stigende i sin popularitet, og i begyndelsen af ​​2018 blev den mere populær end jQuery, i det mindste med hensyn til Google-søgninger. Vi vil ikke sammenligne værktøjer med hensyn til deres efterspørgsel i søgemaskinerne; det giver os imidlertid en klar forståelse af, at ReactJS-biblioteket bestemt er populært. Når det er sagt, lad os tale om at bruge ReactJS til at skabe bedre Front-End-apps.

Vi nyder virkelig at se dig nyde vores forfattere. Så hvis du finder dette indlæg nyttigt, skal du trykke på -knappen nedenfor :)

Hvad gør ReactJS så populær, udover det faktum, at Facebook oprettede det? Vi tror, ​​det skyldes, at ReactJS er ligetil at arbejde med. Det er let at lære, og det er optimeret til ydeevne ved hjælp af dets virtuelle DOM. Ved at implementere virtuel DOM tilbyder ReactJS en gengivelsesmotor en måde at hurtigt gendanne kun de elementer, der skal opdateres. Som et resultat får ReactJS-udviklere apps, der er hurtige og behagelige at bruge.

ReactJS er et bibliotek, der bruger JavaScript til at oprette apps. For at begynde at oprette apps i ReactJS skal du lære dets API og kende JavaScript. JavaScript er sandsynligvis det mest populære programmeringssprog i disse dage. ReactJS gør det også muligt for udviklere at modellere og beskrive en app i UI-komponenter. Så du siger bare, hvad du skal gøre, og ReactJS ved, hvordan man gør det.

Her er nogle tendenser for de sidste fem år fra Google:

Et af de vigtigste ReactJS-koncepter er, at du opretter genanvendelige, sammenhængende komponenter, der kan sættes sammen og danne en app. Hver komponent kan have sin egen tilstand, medmindre den er tilstandsløs (mere om dette senere). ReactJS samler alle dine komponenter i en spand og anvender nogle optimeringsteknikker såsom virtuel DOM for at gengive appen i din browser effektivt.

Lad os starte med at afklare, hvad en komponent er, og hvad den ikke er. Komponenten er en selvforsynende, uafhængig del af UI. Hver komponent kan integrere andre komponenter, hvor hver har sin tilstand og API. Efter konvention skal du opbevare din komponentrelaterede kode i en bestemt mappe. Ved at gemme alle filerne for hver komponent i en enkelt mappe kan du oprette genanvendelige komponenter, så du kan bruge dem i de andre apps.

2. Typer ReactJS-komponenter

Der er fire hovedtyper af ReactJS-komponenter:

  1. Tilstandsfulde eller klassebaserede komponenter
  2. Tilstandsfri eller funktionsbaserede komponenter
  3. Præsentative (eller højordre) komponenter
  4. Beholderkomponenter

En foretrukken struktur af dit komponenttræ vises til venstre.

Tilstandsfulde komponenter eller klassebaserede komponenter

En tilstand, der er fuld, har sin tilstand og data tilknyttet staten. Du kan videregive data i denne type komponent via tilstand eller rekvisitaobjekter. Tilstandsfulde komponenter er også sværere at understøtte, da de vedvarer nogle data og kan ændre appens globale tilstand. Desuden er state-full-komponenter oftest klassebaserede komponenter, der har en konstruktør (det anses for at være den bedste praksis at indstille tilstand for din komponent i konstruktøren).

Her er et eksempel på den tilstandsfulde, klassebaserede ReactJS-komponent:

Rekvisitter er uforanderlige og er envejs bundet til en tilstand, og det er derfor, du ikke kan ændre dem i din komponent. Du bruger rekvisitter til at indstille en tilstand for komponenten og til at gengive dens UI. Hvis du prøver at ændre rekvisitter i din komponent, får du en type fejl.

Stat er et objekt, der udsættes for en komponent. Statens anvendelsesområde er begrænset til inden i den komponent, hvor det er deklareret. Komponenter kan initialisere tilstand og videresende den til en anden komponent. Vi kan erklære en stat på to måder ved hjælp af konstruktøren eller erklære statsejendom. Med det andet tilfælde er det bare syntaktisk sukker, og transpilereren (som Babel) vil gøre din statsegenskabsangivelse til konstruktøren for dig under hætten. Tilstandsfri komponenter eller funktionsbaserede komponenter, og hvad React Hooks er til Funktionsbaserede komponenter er bare enkle JavaScript-funktioner. Funktionsbaserede komponenter returnerer et ReactJS-element eller en samling, der kan være en 'delvis komponent' som <> ... eller en fuldt funktionsbaseret komponent med de logiske og indlejrede komponenter. Da du ikke kan bruge en konstruktør i en funktionsbaseret komponent (ja, det gør du faktisk, da ReactJS v16.8), kan du ikke gøre din komponent tilstand-fuld. Det er statsløst, fordi du ikke kan vedvare data i disse typer komponenter. Oftest giver du rekvisitter til den funktionsbaserede komponent for at gengive dens UI. Her er et eksempel på den tilstandsløse, funktionsbaserede ReactJS-komponent:

Fra ydeevne synspunkt er der praktisk talt ingen forskel mellem at bruge klassebaserede komponenter og bruge funktionsbaserede komponenter. ReactJS-gengivelsesmekanisme er smart nok til at optimere det for os.

Funktionsbaserede komponenter er lettere at arbejde med og mere behagelige at teste. Dette er grunden til, at gruppen af ​​ReactJS-udviklere skubber dig til at skrive funktionsbaserede komponenter i stedet for klassebaserede. Statsløse funktionsbaserede komponenter har nogle begrænsninger og skal i det væsentlige have et globalt sted at styre staten. Det adskiller sig fra ReactJS-paradigmet med at skrive komponenter (for flere detaljer, se nedenfor).

For at gøre det muligt for udviklere at skrive tilstandsfulde, funktionsbaserede komponenter og på samme tid give muligheden for at bruge tilstands- og komponentlivscyklusmetoder, tilføjede React v16.8 en ny funktion kaldet React Hooks. Grundlæggende er React Hooks et forsøg på at fjerne klassebaserede komponenter. Med React Hooks kan du skrive tilstandsfulde funktionsbaserede komponenter uden at bruge klasser. Sandsynligvis vil vi se klassebaserede komponenter elimineret med kroge på et tidspunkt i fremtiden.

React Hooks sigter også mod at forenkle applikationsdesign ved at undgå komponenter, der ikke har eller ikke har brug for konstruktører, selvom de er erklæret som klasser. Oftest arbejder du med statsløse komponenter, hvis du tænker på det ideelle design af din app. Når vi bygger ReactJS-apps til vores klienter, bruger vi normalt et tyndt lag mellem vores komponentrepræsentation og applikationens logik. Dette tillader os at afkoble den visuelle repræsentation af komponenten fra dens opførsel.

3. Data-Down, Actions-Up

Hvad er designmønsteret "Data Down, Actions Up"? I det væsentlige betyder det, at du har en højordre-komponent (HOC - se forklaring nedenfor), som accepterer dataene i dens 'rekvisitter' og overfører disse data ned i dens visning eller indlejrede komponenter. For at interagere med komponenten udløser brugere handlinger, såsom at trykke på en knap, og komponenten reagerer på denne interaktion ved at udsende hændelser. Så for at sige, det udløser en begivenhed i den modsatte retning af, hvordan disse data blev videregivet.

Disse begivenheder eller handlinger overføres til en overordnet komponent. Den overordnede komponent udløser en anden handling, der ændrer en global applikationstilstand.

4. Komponent med høj ordre

High-Order Component (eller HOC) er i det væsentlige et designmønster, også kendt som et Decorator-mønster. I ReactJS er en HOC en komponent, der indpakker en anden komponent ved at tilføje ekstra funktionalitet eller ekstra egenskaber. Dette tillader abstraktion fra nogle ofte brugt logik og holder din kode TØR. Det er sådan, du distribuerer kompleks komponentstruktur mellem andre komponenter i ReactJS og en måde at afkoble din applikationslogik og UI. For eksempel kan du bruge containerkomponent som en HOC for din præsentationsknapkomponent.

Her er et eksempel på HOC ReactJS-komponenten:

5. Beholderkomponenter

Containerkomponenter har på den anden side logik til at indstille tilstand eller har funktioner til at udsende begivenheder op til en overordnet komponent. Den almindelige tommelfingerregel er at holde din komponent så enkel som muligt med et enkelt ansvarsprincip designprincip i tankerne, hvilket væsentligt betyder, at din komponent skal gøre en ting, men gør det godt. Oftest er disse typer komponenter HOC'er, der kan rumme få præsentative komponenter. Præsentationskomponenter At skrive enkle komponenter kan reducere din samlede applikationskompleksitet. Her er, hvor præsentative komponenter kommer i spil. Disse komponenter skal have minimal til ingen logik. Præsentationskomponenter accepterer data og udsender begivenheder til et tilbagekald, som de modtager som en del af dets rekvisitter. I det væsentlige gengiver denne type komponent brugergrænseflade og udfører en funktion, der blev overført til det, når der sker en handling i dens brugergrænseflade. Denne type komponent er en byggesten og kaldes undertiden en Low-Order Component (eller LOC).

6. Liste over bedste fremgangsmåder

  • [Opdater 22. maj 2019] - Når du bruger ReduxJS, skal du opdele din Reducer-kode i mindre metoder for at undgå enorme JSON i din Reducer.
  • Overvej at bruge TypeScript i dine apps, hvis du ikke allerede gør det.
  • Brug create-react-app-generatoren til at starte din ReactJS-app.
  • Opbevar din kode TØR. Gentag ikke dig selv, men husk, at kodeduplikation IKKE altid er en dårlig ting.
  • Undgå at have store klasser, metoder eller komponenter, herunder reduktionsmidler.
  • Brug mere robuste administratorer til at administrere applikationstilstand, f.eks. Redux.
  • Brug begivenhedssynkronisator, såsom Redux-Thunk, til interaktioner med dit backend API.
  • Undgå at overføre for mange attributter eller argumenter. Begræns dig selv til fem rekvisitter, som du går ind i din komponent.
  • Brug ReactJS defaultProps og ReactJS propTypes.
  • Brug lint, opdel linjer, der er for lange.
  • Opbevar din egen jslint-konfigurationsfil.
  • Brug altid en afhængighedsadministrator med en låsefil, såsom NPM eller garn.
  • Test din almindeligt adgangskode, kode, der er kompleks og tilbøjelig til fejl.
  • Skriv flere test, der giver mere testdækning for din kode med lidt indsats og testkode for at sikre, at den fungerer korrekt.
  • Hver gang du finder en fejl, skal du sørge for at skrive en test først.
  • Brug funktionsbaserede komponenter ved at begynde at bruge React Hooks, en ny ReactJS-måde at oprette state-full komponenter.
  • Brug ES6-de-strukturering til dine rekvisitter.
  • Brug betinget gengivelse.
  • Bruger `kort ()` for at indsamle og gengive samlinger af komponenter.
  • Brug delkomponenter, f.eks. `<>` ... ``
  • Navngiv dine begivenhedshåndterere med håndtagspræfikser, såsom `handleClick ()` eller `handleUpdate () '.
  • Brug `onChange` til at kontrollere dine indgange, såsom` onChange = {this.handleInputChange ()} `.
  • Brug JEST til at teste din ReactJS-kode.

Vi har nævnt begivenhedssynkronisatorer, såsom Redux-Thunk. ReactJS v16.3 introducerede en ny funktion kaldet React Context API. En del af dens funktionalitet er at efterligne redux-thunk-funktionalitet og synkronisere begivenheder med ReactJS-midler. Det er en funktion, der er meget efterspurgt, da næsten enhver ReactJS-applikation taler til back-end API og er nødt til at synkronisere anmodninger og begivenheder. Vi holder øje med denne API og holder dig opdateret med opdateringer.

Her er et eksempel på brug af defaultProps og propTypes:

7. Konklusion

Vi håber, at denne artikel kaster lys over ReactJS bedste praksis og mønstre, der er meget populære i 2019. Som en bonus kan du se en anden artikel nedenfor, også kan du tilmelde dig en gratis opdatering og nyt læringsmateriale om ReactJS for at modtage friske opdateringer. Der er endnu en ting…

Vi har virkelig brug for dit klap! Hvis du finder dette indlæg nyttigt, skal du trykke på -knappen nedenfor :) Her er vores første til dig. Du er sej!

.

Bonusmateriale: Her er vores nylige artikel om Redux og Redux-Thunk. Vi vil forklare, hvordan to arbejder sammen.

https://medium.com/@konstankino/2019-redux-and-redux-thunk-for-reactjs-explained-e249b70d6188