10 ekspert ReactJS-tip, som du har brug for at vide i dag

Ekspert ReactJS tip

React er vokset til et af de mest populære værktøjer, der findes i en webudviklers bibliotek, men som alt andet skal du lære at bruge det korrekt for at få mest muligt ud af det.

Hvis du kæmper med React, har du held og lykke. Da vi har samlet et udvalg af vigtige teknikker, der forbedrer din kodeoutput. Læs videre for at finde ud af, hvordan du får mest muligt ud af rammen. Vil du oprette et websted uden at skulle kode? Brug en webstedsbygger . Og hvis du er bekymret for at opretholde dit websteds behov, en anstændig webhosting service kan hjælpe dig.



01. Komponenter af højere orden

Komponenter deler ofte funktionalitet med hinanden, såsom logning eller netværksanmodninger. Disse kan blive vanskelige at vedligeholde, da antallet ved hjælp af denne logik øges. Udviklere opfordres til at abstrakte delt kode og medtage den, hvor det er nødvendigt.



I en almindelig JavaScript-applikation begrebet a højere orden funktion er en måde at nærme sig den på. Kort sagt er de funktioner, der tager andre funktioner som argumenter og giver dem adfærd. Arraymetoder som kort og filter er eksempler på disse.

Komponenter af højere orden (HOC) er React's måde at opnå det samme på. De er komponenter, der formidler adfærd til en bestået komponent.



const Logger = WrappedComponent => ( class Logger extends Component { componentDidMount() { console.log(‘mounted’); } render() { return } } ); export default Logger(MyComponent);

I dette eksempel her returnerer funktionen en ny indpakket komponent, der gengiver den oprindelige, der blev sendt sammen med eventuelle rekvisitter. HOC'er er regelmæssige komponenter og kan gøre alt, hvad de kan, såsom at sende deres egne rekvisitter og tilslutte sig tilbagekald fra livscyklus. Funktionen indpakker derefter originalen ved eksport. Ved at bruge HOC'er gør det ofte anvendte stykker kode lettere at vedligeholde og teste. Når specifik funktionalitet er påkrævet, er de nemme at komme ind, sikre i den viden, at den opfører sig som forventet.

02. Beholder- og præsentationskomponenter

kalender UI

For komplekse brugergrænseflader såsom en kalender er det acceptabelt at placere en container i en præsentationskomponent, så længe deres adfærd forbliver adskilt

Det er altid vigtigt at holde en adskillelse af bekymringer, når man udvikler forskellige dele af en applikation. Hvis det er muligt, skal du holde metoderne til at hente data væk fra, hvordan de vises. I React anvendes et lignende koncept, når det kommer til container- og præsentationskomponenter.



hvordan man udfører overgange i eftervirkninger
class ProductsContainer extends Component { [...] componentDidMount() { fetchProducts() .then(products => this.setState({products})); } render() { return ; } }

Her hentes produkter efter en ekstern metode inde i containeren, opbevares i sin egen butik og sendes derefter som rekvisitter til præsentationskomponenten Produkter der viser dem.

Containerkomponenten ved ikke, hvordan oplysningerne skal vises, den ved kun, hvordan man henter og justerer den. Ligeledes ved præsentationskomponenten ikke, hvor dataene kommer fra. Begge komponenters funktionalitet kan ændres uden at påvirke den anden.

Der kan være et andet afsnit i en applikation - eller en helt separat applikation - der kan gøre brug af den samme præsentationskomponent. Ved at have det til at fungere udelukkende på rekvisitter, behøver hver del af applikationen kun at oprette sin egen container omkring den.

Denne tilgang gør det også nemmere at teste enheder. Containertestene behøver kun at bekymre sig om tilstanden, der indstilles, mens præsentationselementet kan sendes statiske rekvisitter for at opnå et forudsigeligt resultat.

03. Fejlgrænser

Uanset hvor godt et projekt er sammensat, vil fejl stadig finde en vej ind. Disse kan ske under meget specifikke omstændigheder, være svære at diagnosticere og efterlade applikationen i en ustabil tilstand - et absolut mareridt for både brugere og udviklere.

React v16 blev frigivet tilbage i september 2017. Som en del af denne opdatering vil eventuelle uhåndterede fejl nu afmontere hele applikationen. For at imødegå dette blev begrebet fejlgrænser introduceret. Når der opstår en fejl i en komponent, vil den boble op gennem sine forældre, indtil den enten rammer applikationens rod, hvor den afmonteres, eller finder en komponent, der håndterer fejlen. Idéen med fejlgrænsen er en generisk komponent, der tager sig af fejlene for sine børn.

componentDidCatch(error, info) { this.setState({ error: error.message }); } render() { return this.state.error ? : this.props.children; }

Ved at tilslutte en ny livscyklusmetode kan fejlen gemmes i tilstand og erstatte barnets indhold. Dette effektivt afskærmer denne gren af ​​applikationen fra resten.

Grænserne fungerer som prøv / fang blokke. De kan indlejres inde i hinanden uden problemer, men eventuelle fejl, der opstår i dem, fanges af den næste grænse op. Det er bedst, at de holdes så enkle som muligt.

04. Portaler

Indholdet af portalen vises inde i den originale komponent i React

Indholdet af portalen vises inde i den originale komponent i React's DevTools

Der er tidspunkter, hvor en komponent skal bryde ud af sin forælder for at være et andet sted i DOM. Modale vinduer hører f.eks. Til på det øverste niveau på siden for at undgå problemer med z-indeks og placering.

Portaler er også en del af v16, som gør det muligt for React at gengive komponenter til DOM-noder helt adskilt fra resten af ​​applikationen. Indholdet holder sin plads i React's struktur, men gengives andetsteds. Dette betyder, at enhver begivenhed, der udløses inde i portalen, vil boble op gennem moderen i React snarere end ind i selve portalcontainerelementet.

ReactDOM.createPortal( this.props.children, document.getElementById(‘modal’), );

Ved at oprette en dedikeret komponent kan portalen returneres af gengivelsesfunktionen. Når indhold skal vises, kan det pakkes ind i denne komponent og derefter vises i det andet element.

05. CSS med stylede komponenter

standard og primær Reactjs

Komponenter får et randomiseret className, der passer til stilen, hvilket desværre kan gøre restyling inden for DevTools vanskeligere

Styling af et program med genanvendelige komponenter kan føre til problemer med sammenstødende klassenavne. Konventioner som BEM hjælper med at afbøde problemet, men de sigter mod at behandle symptomerne snarere end problemet.

Det er muligt for komponenter at tage ansvar for deres egne stilarter. Dette betyder, at de har en måde at justere visuals på farten uden behov for hverken indbyggede stilarter eller klasseskift. En sådan løsning er stylede komponenter , som bruger JavaScript til sin fordel.

Som navnet antyder, i stedet for at oprette classNames, opretter det helt nye færdige komponenter. Systemet bruger ES2015-mærkede skabelonbogstaver, som kan acceptere almindelig CSS og anvende det på det ønskede element.

const Button = styled.button` font-size: 2rem; background: ${props => props.primary ? ‘#3CB4CB’ : ‘white’}; `;

Ved at bruge en pladsholder kan stilen ændres dynamisk. I dette eksempel ændres knapbaggrunden afhængigt af, om knappen passeres a primær rekvisit. Ethvert udtryk kan bruges her til at beregne den ønskede stil.

Den oprettede komponent kan bruges ligesom alle andre, og alle rekvisitter vil blive sendt igennem. Brugerdefinerede komponenter kan også styles på samme måde ved hjælp af stylet (ComponentName) i stedet.

06. Brug af React-specifik linting

Visual Studio-kode

Kode redaktører som Visual Studio Code kan integreres med linters og give brugerne feedback i realtid, når komponenter bliver skrevet

En af de bedste måder at holde koden ren på er at bruge et linterværktøj. De definerer et sæt regler, som koden skal følge, og fremhæver hvor som helst den fejler. Ved at sikre, at alle koder overholder disse regler, før de smelter sammen i kodebasen, forbliver projekter vedligeholdelige, og kodekvaliteten øges.

ESLint er en populær linter til forskellige JavaScript-projekter. Der er plugins tilgængelige, der analyserer specifikke kodestilarter. En af de mest almindelige for
React er en npm-pakke kaldet eslint-plugin-reagerer .

Som standard kontrollerer den en række bedste praksis med regler, der kontrollerer ting fra nøgler i iteratorer til et komplet sæt proptyper. Flere muligheder kan aktiveres pr. Projekt ved at opdatere .eslintrc-konfigurationsfilen.

Et andet populært plugin er eslint-plugin-jsx-a11y , som hjælper med at løse almindelige problemer med tilgængelighed. Da JSX tilbyder lidt anden syntaks til almindelig HTML, problemer med alt tekst og tabindex vil f.eks. ikke blive afhentet af almindelige plugins. Det vil også afhente React-specifikke problemer, såsom tildeling luft rekvisitter med forskellig syntaks.

07. Snapshot-test med Jest

Er

Jest viser nøjagtigt, hvad der er ændret mellem de to snapshots, hvilket kan hjælpe med at identificere forsætlige ændringer fra utilsigtet

Selvom det at have fuld testdækning har åbenlyse fordele, koster det en pris. Når du skriver mange små komponenter, kan testene tage længere tid at kode end selve komponenten. Det meste af tiden er det kun nødvendigt at kontrollere, at intet har ændret sig.

Jest er en testramme oprettet af Facebook. En af dens unikke funktioner gør det muligt for udviklere at fange visningen af ​​en komponent på et tidspunkt og sammenligne den med eventuelle ændringer i fremtiden. Ændringerne - bevidst eller ej - vil blive markeret for enten accept eller afvisning. Test bliver hurtige, forudsigelige og enkle at fejle, når det er let at se nøjagtigt, hvad der ændrede sig.

hvordan man laver tegneserier i klipstudiemaling
test('Button renders', () => { const button = renderer .create(Button) .toJSON(); expect(button).toMatchSnapshot(); });

Når testen først køres, konverterer Jest visningen til JSON og gemmer den i et specielt bibliotek, der kan være forpligtet til kildekontrol. Når den næste kører, kontrollerer den filen og rapporterer eventuelle forskelle. Hvis ændringen var bevidst, erstattes snapshotet, og testen består. Få mere at vide om Jest og snapshot-test .

08. Kodedeling

Som med enhver enkelt sideapplikation bliver alt samlet i en fil, der hurtigt kan blomstre i størrelse, hvis den ikke bliver holdt i skak. Værktøjer som Webpack kan hjælpe med at opdele dette bundt i mere håndterbare bidder, som derefter kan bestilles efter behov.

Da React tilskynder til at skabe mange mindre komponenter, er der masser af muligheder for at bryde pakken op. Det kan reageres pakke gør det muligt for en komponent at definere nøjagtigt, hvad den skal gengive, og Webpack kan automatisk opdele sin pakke for at imødekomme dette.

const LoadableButton = Loadable({ loader: () => import(‘./Button’), loading: () => Loading... , });

Loadable er en HOC, der dynamisk importerer alt, hvad komponenten har brug for. Det tager et par indstillinger, såsom hvad der skal vises, mens alt indlæses, hvilket gør det meget tilpasseligt. LoadableButton kan derefter bruges som en almindelig komponent uden problemer.

For større applikationer med routing kan det være mere fordelagtigt at opdele efter rute i stedet for komponent. Fælles stier kan trækkes ind med en anmodning og kan hjælpe med at fremskynde tingene. Det er vigtigt at have en balance mellem antallet af bundter og deres samlede størrelse, som vil ændre sig afhængigt af applikationens behov.

bærbar taske 15 tommer macbook pro

Flere detaljer om kan reageres kan findes her .

09. Servergengivelse

Med store applikationer kan brugerne se på en tom skærm, mens webstedet indlæses. Ideelt set skal dette være så lille som muligt. Ved at gengive den oprindelige visning på serveren kan den opfattede belastningstid reduceres, hvilket har den ekstra fordel, at crawlere lettere kan analysere indhold.

React er allerede udstyret til at håndtere gengivelse på Node-servere. En speciel version af DOM-gengiveren er tilgængelig, som følger det samme mønster som på klientsiden.

import ReactServer from 'react-dom/server'; import App from './App'; [...] ReactServer.renderToString();

Denne metode udsender den almindelige HTML som en streng, som derefter kan placeres inde i en sidetekst som en del af serversvaret. På klientsiden registrerer React det præ-gengivne indhold og fortsætter problemfrit, hvor det slap.

Servergengivelse i applikationer, der bruger kodedeling, routing eller tilstandscontainere, kan blive mere kompliceret, men det er stadig muligt. Redux vil f.eks. Opbygge et forudindlæst tilstandsobjekt på serveren, som kan hydrere klientsiden, når du opretter butikken.

10. Internationalisering

Intl API

Intl API understøttes i de nyeste versioner af de fleste browsere, og polyfills er tilgængelige for andre

For globale websteder er internationalisering (i18n) afgørende for at engagere lokalt publikum. For biblioteker på klientsiden som React var den eneste mulighed at tjene langsomme, klodsede biblioteker til at håndtere ting som oversættelse og nummerformatering. For nylig er den oprindelige Intl API blevet gjort tilgængelig i browsere for at undgå de tunge downloadomkostninger.

Et bibliotek fra Yahoo-teamet kaldet React Intl hjælper med at bringe denne nye API til React-projekter. Et specielt sæt komponenter oversætter automatisk strenge og formatnumre, datoer og valuta. Det er en del af sin samling af i18n-værktøjer kaldet FormatJS.

Hver komponent tager rekvisitter, der spejler de tilgængelige indstillinger til Intl API. Ved at levere det krævede format af datoen kan API'en bruge det, den ved om browserens lokalitet, til at beregne en streng. Hver gang nogen af ​​disse rekvisitter ændres, opdateres strengen automatisk.

Strengoversættelser kræver tilføjelse af en passende oversættelse til Beskeder prop til udbyderen ved roden af ​​applikationen, men som kan bruges i hele applikationen. Biblioteket registrerer ID'et og erstatter indholdet efter behov. Detaljer om alle mulighederne i denne funktion kan findes her . Hvis du vil gemme test af dine websider, skal du overveje at eksportere som PDF-filer og gemme i delbar Sky lagring .

Denne artikel blev oprindeligt offentliggjort i 2018-udgaven af net , verdens bedst sælgende magasin til webdesignere og udviklere. Abonner her .

Relaterede artikler: