Reager beste praksis og nyttige funksjoner

Lately React har blitt det nye verktøyet som brukes av utviklere for å lage alt fra en enkeltsidesapplikasjon til mobilapplikasjoner. Men siden jeg begynte å gå dypere inn i React har jeg sett alle disse “kule” nodemodulene som er ekstremt dårlig utviklet. De følger ingen regler, komponentene er altfor store. De bruker tilstand for stort sett alt, og de utnytter ikke dumme komponenter. Alle med nok erfaring forstår hvor mye problemer dette er å opprettholde, og hvor mye belastning det tar på nettleseren hvis du gjengir hver komponent hver gang. I denne artikkelen vil jeg lede deg gjennom Reacts beste praksis, både om hvordan du konfigurerer React og hvordan du gjør det ekstremt raskt.

Vær oppmerksom på at jeg vil fortsette å oppdatere denne artikkelen når nye fremgangsmåter dukker opp.

Før du begynner å lese, vær oppmerksom på at React er et funksjonelt programmeringsbibliotek. Hvis du ikke vet hva FP er, kan du lese dette Stack Exchange-svaret.

Bruk ES6 (transponert med Babel)

ES6 vil gjøre livet ditt mye enklere. Det får JS til å se og føle seg mer moderne. Et godt eksempel med ES6 er Generatorer og løfter. Husk da det var en tid at du måtte gjøre en haug med nestede samtaler for å kunne foreta en asynkron samtale. Nå er jeg glad for å ønske deg velkommen også Synchronous Asynchronous JS, (det er så kult som det høres ut). Et flott eksempel på dette er generatorer:

Hvor dette:

Gjør dette:

Bruk Webpack

Avgjørelsen om å bruke Webpack er enkel: varm omlasting, minifiserte filer, nodemoduler :), og du kan dele applikasjonene dine i små biter og late dem.

Hvis du planlegger å bygge en applikasjon i stor skala, anbefaler jeg å lese denne artikkelen for å forstå hvordan lat lasting fungerer.

Bruk JSX

Hvis du kommer fra en bakgrunn i nettutviklingen, vil JSX føles veldig naturlig. Men hvis bakgrunnen din ikke er i nettutvikling, ikke bekymre deg for mye, er JSX veldig lett å lære. Merk at hvis du ikke bruker JSX, vil applikasjonen være vanskeligere å vedlikeholde.

Se alltid på buntstørrelsen

Et tips for å gjøre pakkeveien mindre, er å importere direkte fra nodemodulens rotbane.

Gjør dette:

importer Foo fra ‘foo / Foo’

i stedet for:

Importer {Foo} fra ‘foo’

Hold komponentene små (veldig små)

Tommelfingerregel er at hvis render-metoden din har mer enn 10 linjer, sannsynligvis er altfor stor. Hele ideen om å bruke React er gjenbrukbarhet til kode, så hvis du bare kaster alt i en fil, mister du skjønnheten i React.

Hva må ha sin egen komponent?

Når du tenker React må du tenke på gjenbruk av kode og kodestruktur. Du vil ikke opprette en komponent for et enkelt inputelement som bare har en kodelinje. En komponent er en blanding av “HTML” -elementer som brukeren oppfatter som en. Jeg vet at dette høres litt rart ut, men kan se et eksempel. Ta en titt på dette påloggingsskjermbildet:

Hva er strukturen bak det. Du har et skjema som inneholder to innganger en knapp og en lenke. La oss se dette i kode:

Hva er galt her? Gjentakelse. Inngangene inneholder den samme strukturen, hvorfor ikke lage den til en komponent.

Nå er det vakkert. Jeg vil ikke komme i detalj her, men hvis du vil fortsette å lese, gå til Thinking React.

Hva med stat?

Beste praksis i React er å minimere tilstanden din. En ting å huske på er å unngå å synkronisere tilstand mellom et barn og foreldre. I eksemplet over har vi et skjema i den formen staten blir gitt som en rekvisitter fra visningen, og hver gang brukeren oppdaterer passordet og brukernavnet blir statusen oppdatert i visningen og ikke skjemaet.

Bruk ShouldComponentUpdate for ytelsesoptimalisering

React er et templatespråk som gjengir HVERTID at rekvisittene eller tilstanden til komponenten endres. Så tenk deg å måtte gjengi hele siden hver gang der i en handling. Det krever stor belastning på nettleseren. Det er her ShouldComponentUpdate kommer inn, hver gang React gjengir visningen den sjekker for å se om shouldComponentUpdate returnerer falsk / sann. Så når du har en statisk komponent, gjør deg selv en tjeneste og returner usann. Eller hvis ikke er statisk sjekk for å se om rekvisittene / tilstanden har endret seg.

Hvis du vil lese mer om ytelsesoptimalisering, kan du lese artikkelen min om React Perf

Tenk på inmutability

Hvis du kommer fra Scala eller andre språk med høy ytelse, er inmutability et konsept som du sannsynligvis virkelig er kjent med. Men hvis du ikke er kjent med konseptet, tenk på uforanderlighet som å ha tvillinger. De er veldig like, og de ser like ut, men de er ikke like. For eksempel:

Hva skjedde nå? Object2 ble opprettet som en referanse til object1 som betyr at i enhver forstand av ordet object2 er en annen måte å henvise til object1. Da jeg opprettet objekt3 opprettet jeg et nytt objekt som har samme struktur som objekt1. Funksjonen Object.assign tar et nytt objekt og kloner deretter strukturen til objekt1, og oppretter derfor en ny referanse, så når du sammenligner objekt1 med objekt3, er de forskjellige. Hvorfor er dette viktig? Tenk på ytelsesoptimalisering, jeg nevnte over at React gjør hver gang tilstanden til en komponent endres. Når du bruker ShouldComponentUpdate-funksjonen i stedet for å gjøre en dyp sjekk for å se om alle attributtene er forskjellige, kan du bare sammenligne objektene. Hvis du vil vite mer, fortsett å lese denne artikkelen.

Bruk smarte og stumme komponenter

Det er ikke mye å si her annet enn at du ikke trenger å ha en tilstand i alle objekter. Ideelt sett vil du ha et smart foreldre syn, og alle barna er stumme komponenter som bare mottar rekvisitter og ikke har noen logikk i det. Du kan lage en stum komponent ved å gjøre noe sånt som dette:

Stomme komponenter er også lettere å feilsøke fordi det håndhever metodikken fra toppen og ned som React handler om.

Bruk PropTypes

PropTypes hjelper deg med å angi datavalidering for komponenter. Dette er veldig nyttig når du feilsøker og når du jobber med flere utviklere. Alle som jobber med et stort team, bør lese denne artikkelen.

Bind alltid funksjonene i konstruktormetoden

Forsøk å binde komponenter i konstruktormetoden når du arbeider med komponenter som bruker tilstand. Husk at du kan bruke ES7 nå, og du kan binde funksjonene ved å bruke noe slikt nå (I stedet for å binde i konstruktøren):

someFunction = () => {
}

Bruk Redux / Flux

Når du arbeider med data, vil du bruke Flux eller Redux. Flux / Redux lar deg håndtere data enkelt og tar smertene bort fra å håndtere frontend-cache. Jeg personlig bruker Redux fordi det tvinger deg til å ha en mer kontrollert filstruktur.

Husk at det noen ganger er veldig nyttig å bruke Redux / Flux, men det er ikke sikkert at du trenger å oppbevare hele applikasjonsstatusen din i et enkelt objekt. Les mer om det her.

Bruk normalizr

Nå som vi snakker om data, kommer jeg til å ta et øyeblikk og introdusere deg for den hellige gral av å håndtere komplekse datastrukturer. Normalizr strukturerer de nestede json-objektene dine til enkle strukturer som du kan endre mens du er på farten.

Filstruktur

Jeg kommer til å komme med en sløv uttalelse her og si at jeg bare har sett to filstrukturer med React / Redux som gjør ting enkelt å jobbe med.

Første struktur:

Andre struktur:

Bruk containere (Avviklet - 2017 Oppdater neste kapittel)

Årsaken til at du vil bruke containere som gir dataene, er fordi du vil unngå å måtte koble hver visning til en butikk når du arbeider med Flux / Redux. Den beste måten å gjøre dette på er å lage to containere. En som inneholder alle sikre visninger (visninger som trenger autentisering) og en som inneholder alle usikre visninger. Den beste måten å lage en foreldrebeholder er å klone barna og gi de ønskede rekvisittene.

Eksempel:

Bruk maler i stedet for containere

Mens jeg jobbet med containere og klonet rekvisittene ned til utsikten, fant jeg en mer effektiv måte å gjøre dette på. Måten jeg anbefaler det nå på i stedet for å bruke containere er å lage et BaseTemplate som utvides med et AuthenticatedTemplate og en NotAuthenticatedBaseTemplate. I gjør to maler vil du legge til all funksjonaliteten og staten som deles på tvers av alle de ikke-autentiserte / autentiserte visningene. I visningene i stedet for å utvide React.Component utvider du malen. På denne måten unngår du kloning av objekter, og du kan filtrere rekvisittene som sendes ned komponenttreet.

Unngå refs

Refs vil bare gjøre koden din vanskeligere å vedlikeholde. Pluss når du bruker refs, manipulerer du den virtuelle Dom direkte. Noe som betyr at komponenten må gjengi hele Dom-treet på nytt.

Bruk validering av prop

PropTypes vil gjøre livet ditt mye bedre når du jobber med et stort team. De lar deg tilsynelatende feilsøke komponentene dine. De vil også gjøre avlusingen din mye enklere. På en måte setter du standardkrav for en bestemt komponent.

Andre kommentarer

Jeg vil understreke at du bør dele alle komponentene dine i individuelle filer.

Bruk en ruter: Det er ikke så mye å si her annet enn at hvis du ønsker å lage en enkeltsidig app trenger du en ruter. Jeg personlig bruker React Router.

Hvis du bruker flux, husk å åpne butikken og lytte til endrede hendelser. Du vil ikke lage minnelekkasjer.

Hvis du vil endre tittelen på søknaden din dynamisk, kan du gjøre noe slikt:

Denne repoen er et flott eksempel på React / Redux-godkjenning.

Hva er nytt i 2017

Gjør deg klar for en større omskriving. Skaperne av react bygger nå opp reagerer kjernen. Den har bedre ytelse, bedre animasjoner og flere API-er du kan utnytte for å bygge store applikasjoner. Du kan lese mer her.

Nyttige hjelperfunksjoner

Følgende funksjon er en objekt-sammenligningsfunksjon. Bruk: sjekk om stat eller rekvisitter har endret seg i shouldComponentUpdate

Lag redusering dynamisk

bruk:

Lag konstanter:

Gjengi hvis:

Bruk: gjengi komponent hvis noe er riktig

Endre tilstandsverdi dynamisk:

Min webpack.config.js

Fortsett å lese om React High Performance Applications her.

Hvis du likte denne artikkelen, kan du klikke på den grønne nedenfor, slik at andre kan glede seg over den. Du kan også stille spørsmål eller legge igjen notater med nyttig praksis eller nyttige funksjoner du kjenner.

Følg meg på twitter @nesbtesh