ReactJS beste praksis fra 2019

[oppdatering, 22. mai 2019] - Legg til en annen god praksis på listen. Se nedenfor.

[oppdatering 19. mai 2019] - Vi la til en ny artikkel om Redux og Redux-Thunk. Enkelt forklart med mange eksempler.

[oppdatering 23. juli 2019] - På grunn av mange forespørsler, vil vi legge til en ny artikkel om ReactJS ANTIpatterns. Linken blir lagt ut her. Vennligst støtt med et klapp. Takk skal du ha!

1. Velkommen, ReactJS

De siste fem årene har ReactJS økt raskt i popularitet, og i begynnelsen av 2018 ble den mer populær enn jQuery, i hvert fall når det gjelder Google-søk. Vi vil ikke sammenligne verktøy når det gjelder etterspørsel i søkemotorene; Det gir oss imidlertid en klar forståelse av at ReactJS-biblioteket definitivt er populært. Når det er sagt, la oss snakke om å bruke ReactJS for å lage bedre Front-End-apper.

Vi liker å se at du liker skriftene våre. Så hvis du synes dette innlegget er nyttig, kan du trykke på -knappen nedenfor :)

Hva er det som gjør ReactJS så populær, i tillegg til at Facebook opprettet den? Vi tror det skyldes at ReactJS er grei å jobbe med. Det er enkelt å lære, og det er optimalisert for ytelse ved å bruke den virtuelle DOM-en. Ved å implementere virtuell DOM tilbyr ReactJS en gjengivelsesmotor en måte å raskt gjengi bare de elementene som må oppdateres. Som et resultat får ReactJS-utviklere apper som er raske og hyggelige å bruke.

ReactJS er et bibliotek som bruker JavaScript for å lage apper. For å begynne å bygge apper i ReactJS, må du lære dets API og kjenne JavaScript. JavaScript er sannsynligvis det mest populære programmeringsspråket i disse dager. ReactJS gjør det også mulig for utviklere å modellere og beskrive en app i UI-komponenter. Så du sier bare hva du skal gjøre, og ReactJS vet hvordan du gjør det.

Her er noen trender de siste fem årene fra Google:

Et av de viktigste ReactJS-konseptene er at du lager gjenbrukbare, sammenhengende komponenter som kan settes sammen og danner en app. Hver komponent kan ha sin egen tilstand med mindre den er tilstandsløs (mer om dette senere). ReactJS samler alle komponentene dine i en bøtte og bruker noen optimaliseringsteknikker som virtuell DOM for å gjengi appen i nettleseren din effektivt.

La oss begynne med å avklare hva en komponent er og hva den ikke er. Komponenten er en selvforsynt, uavhengig del av brukergrensesnittet. Hver komponent kan bygge inn andre komponenter, der hver har status og API. I samsvar med dette, bør du oppbevare den komponentrelaterte koden i en bestemt mappe. Ved å beholde alle filene for hver komponent i en enkelt mappe kan du lage gjenbrukbare komponenter slik at du kan bruke dem i de andre appene.

2. Typer ReactJS-komponenter

Det er fire hovedtyper av ReactJS-komponenter:

  1. State-full eller klassebaserte komponenter
  2. Tilstandsfrie eller funksjonsbaserte komponenter
  3. Presentasjonskomponenter (eller høyordre)
  4. Beholderkomponenter

En foretrukken struktur av komponenttreet ditt vises til venstre.

State-full komponenter eller klassebaserte komponenter

En tilstandsfull komponent har status og data tilknyttet staten. Du kan sende data inne i denne typen komponenter via tilstands- eller rekvisittobjekter. Tilstandsfulle komponenter er også vanskeligere å støtte da de vedvarer med noen data og kan endre den globale tilstanden til appen. Dessuten er statlige komponenter som oftest klassebaserte komponenter som har en konstruktør (det anses som en god praksis å angi tilstand for komponenten din i konstruktøren).

Her er et eksempel på den tilstrekkelige, klassebaserte ReactJS-komponenten:

Rekvisitter er uforanderlige og er enveis bundet til en tilstand, og det er derfor du ikke kan endre dem i komponenten din. Du bruker rekvisitter for å angi en tilstand for komponenten og gjengi dens brukergrensesnitt. Hvis du prøver å endre rekvisitter i komponenten din, får du en typefeil.

Tilstand er et objekt som blir utsatt for en komponent. Statens omfang er begrenset til inne i komponenten der det er deklarert. Komponenter kan initialisere tilstand og overføre den til en annen komponent. Vi kan erklære en stat på to måter, ved å bruke konstruktøren eller erklære statseiendom. Med det andre tilfellet, det er bare syntaktisk sukker, og transpilereren (for eksempel Babel) vil gjøre din statlige eiendomserklæring om til konstruktøren for deg under panseret. Tilstandsfrie komponenter eller funksjonsbaserte komponenter og hva React Hooks er for Funksjonsbaserte komponenter er bare enkle JavaScript-funksjoner. Funksjonsbaserte komponenter returnerer et ReactJS-element eller en samling, som kan være en 'delkomponent' som <> ... eller en fullstendig funksjonsbasert komponent med logikken og de innebygde komponentene. Siden du ikke kan bruke en konstruktør i en funksjonsbasert komponent (vel, faktisk gjør du det, siden ReactJS v16.8), kan du ikke gjøre komponenten tilstand full. Det er uten status fordi du ikke kan vedvare data i denne typen komponenter. Oftest gir du rekvisitter til den funksjonsbaserte komponenten for å gjengi sin UI. Her er et eksempel på den tilstandsløse, funksjonsbaserte ReactJS-komponenten:

Fra ytelsessynspunktet er det praktisk talt ingen forskjell mellom bruk av klassebaserte komponenter og bruk av funksjonsbaserte komponenter. ReactJS-gjengivelsesmekanismen er smart nok til å optimalisere den for oss.

Funksjonsbaserte komponenter er lettere å jobbe med og mer behagelige å teste. Dette er grunnen til at fellesskapet av ReactJS-utviklere vil pusse deg til å skrive funksjonsbaserte komponenter i stedet for klassebaserte. Tilstandsfrie funksjonsbaserte komponenter har noen begrensninger og må i utgangspunktet ha ett globalt sted å forvalte staten. Det er forskjellig fra ReactJS-paradigmet med å skrive komponenter (for mer informasjon, se nedenfor).

For å gjøre det mulig for utviklere å skrive tilstandsfulle, funksjonsbaserte komponenter og samtidig gi muligheten til å bruke tilstands- og komponenters livssyklusmetoder, la React v16.8 til en ny funksjon som heter React Hooks. I hovedsak er React Hooks et forsøk på å fjerne klassebaserte komponenter. Med React Hooks kan du skrive tilstandsfulle funksjonsbaserte komponenter uten å bruke klasser. Sannsynligvis vil vi se klassebaserte komponenter eliminert med Hooks på et tidspunkt i fremtiden.

React Hooks har også som mål å forenkle applikasjonsdesign ved å unngå komponenter som ikke har eller ikke trenger konstruktører, selv om de er erklært som klasser. Oftest jobber du med statsløse komponenter hvis du tenker på den ideelle designen til appen din. Når vi bygger ReactJS-apper for kundene våre, bruker vi vanligvis et tynt lag mellom komponentrepresentasjonen og applikasjonens logikk. Dette lar oss koble fra den visuelle representasjonen av komponenten fra dens oppførsel.

3. Data-Down, Actions-Up

Hva er designmønsteret «Data Down, Actions Up»? I hovedsak betyr det at du har en High-Order Component (HOC - se forklaring nedenfor) som godtar dataene i sine "rekvisitter" og overfører disse dataene til visningen eller nestede komponenter. For å samhandle med komponenten utløser brukere handlinger som å trykke på en knapp, og komponenten reagerer på den interaksjonen ved å sende ut hendelser. Så å si, det utløser en hendelse, i motsatt retning av hvordan dataene ble gitt.

Disse hendelsene eller handlingene blir gitt videre til en overordnet komponent. Foreldrekomponenten utløser en annen handling som endrer en global applikasjonsstatus.

4. Høyt ordre-komponent

High-Order Component (eller HOC) er i hovedsak et designmønster, også kjent som en dekoratørmønster. I ReactJS er en HOC en komponent som pakker inn en annen komponent ved å legge til ekstra funksjonalitet eller ekstra egenskaper. Dette tillater abstraksjon fra noen ofte brukt logikk og holder koden din TØR. Det er slik du fordeler kompleks komponentstruktur mellom andre komponenter i ReactJS og en måte å koble applikasjonslogikken og brukergrensesnittet fra. For eksempel kan du bruke beholderkomponent som en HOC for presentasjonsknappkomponenten.

Her er et eksempel på HOC ReactJS-komponenten:

5. Beholderkomponenter

Beholderkomponenter har derimot logikk for å stille inn tilstand eller har funksjoner for å avgi hendelser opp til en overordnet komponent. Den generelle tommelfingerregelen er å holde komponenten din så enkel som mulig med et prinsipp for utforming av et enkelt ansvar, som egentlig betyr at komponenten din må gjøre en ting, men gjør det godt. Oftest er disse typer komponenter HOC-er som rommer få presentasjonskomponenter. Presentasjonskomponenter Å skrive enkle komponenter kan redusere den generelle applikasjonskompleksiteten din. Her kommer presentasjonskomponenter inn i bildet. Disse komponentene skal ha minimal til ingen logikk. Presentasjonskomponenter godtar data og sender ut hendelser til en tilbakeringing som de mottar som en del av rekvisittene. I hovedsak gjengir denne typen komponenter brukergrensesnitt og utfører en funksjon som ble sendt inn i den når noe handling i brukergrensesnittet skjer. Denne typen komponenter er en byggestein og omtales noen ganger som en lavordenskomponent (eller LOC).

6. Liste over beste fremgangsmåter

  • [Oppdater 22. mai 2019] - Når du bruker ReduxJS, deler du Reducer-koden i mindre metoder for å unngå enorme JSON i Reducer.
  • Vurder å bruke TypeScript i appene dine hvis du ikke gjør det allerede.
  • Bruk create-react-app-generatoren til å starte opp ReactJS-appen din.
  • Oppbevar koden TØR. Ikke gjenta deg selv, men husk at kodeduplisering ikke alltid er en dårlig ting.
  • Unngå å ha store klasser, metoder eller komponenter, inkludert reduksjonsmidler.
  • Bruk mer robuste ledere til å administrere applikasjonsstatus, for eksempel Redux.
  • Bruk hendelsessynkroniser, for eksempel Redux-Thunk, for interaksjoner med backend API-en.
  • Unngå å gi for mange attributter eller argumenter. Begrens deg til fem rekvisitter som du går inn i komponenten din.
  • Bruk ReactJS defaultProps og ReactJS propTypes.
  • Bruk lint, bryt opp linjer som er for lange.
  • Oppbevar din egen jslint-konfigurasjonsfil.
  • Bruk alltid en avhengighetsansvarlig med en låsefil, for eksempel NPM eller garn.
  • Test den ofte tilgjengelige koden, koden som er kompleks og utsatt for feil.
  • Skriv flere tester som gir mer testdekning for koden din med litt anstrengelse og testkode for å sikre at den fungerer korrekt.
  • Forsikre deg om at du skriver en test først hver gang du finner en feil.
  • Bruk funksjonsbaserte komponenter ved å begynne å bruke React Hooks, en ny ReactJS-måte å lage tilstandsfulle komponenter.
  • Bruk ES6 de-strukturering for rekvisittene dine.
  • Bruk betinget gjengivelse.
  • Bruker `kart ()` for å samle og gjengi samlinger av komponenter.
  • Bruk delkomponenter, for eksempel `<>` ... ``
  • Gi navn til hendelsesbehandlerne dine med håndtaksprefikser, for eksempel `handleClick ()` eller `handleUpdate ()`.
  • Bruk `onChange` for å kontrollere inngangene, for eksempel` onChange = {this.handleInputChange ()} `.
  • Bruk JEST til å teste ReactJS-koden.

Vi har nevnt hendelsessynkronisatorer, for eksempel Redux-Thunk. ReactJS v16.3 introduserte en ny funksjon som heter React Context API. En del av funksjonaliteten er å etterligne redux-thunk-funksjonalitet og synkronisere hendelser med ReactJS-midler. Det er en funksjon som er etterspurt, ettersom nesten alle ReactJS-applikasjoner snakker med back-end API og trenger å synkronisere forespørsler og hendelser. Vi vil følge med på APIen og holde deg oppdatert med oppdateringer.

Her er et eksempel på bruk av standardProps og propTypes:

7. Konklusjon

Vi håper denne artikkelen kaster lys over ReactJS beste praksis og mønstre som er veldig populære i 2019. Som en bonus kan du se en annen artikkel nedenfor, også kan du registrere deg for gratis oppdateringer og nytt læremateriell om ReactJS for å motta nye oppdateringer. Det er en ting til…

Vi trenger virkelig klaffen din! Hvis du synes dette innlegget er nyttig, kan du trykke på -knappen nedenfor :) Her er vår første til deg. Du er kjempebra!

.

Bonusmateriale: Her er vår nylige artikkel om Redux og Redux-Thunk. Vi vil forklare hvordan to jobber sammen.

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