Koncepter til at blive en avanceret React-udvikler

Forøg dit reaktionsniveau ved hjælp af disse teknikker!

Reager logo

Vi elsker alle ReactJS. Det er en af ​​de bedste og populære måder at oprette SPA (Single Page Application). Det tilbyder fleksibilitet og mulighed. Det har en fantastisk funktion at bruge det til at oprette en enkelt komponent på det eksisterende websted eller bruge det til at oprette hele webstedet fra bunden.

ReactJS er nu en ramme, der bruges af mange andre rammer eller værktøjssæt som NextJs, GatsByJs, Razzle, AfterJs osv. Så at blive en bedre ReactJS-udvikler vil igen hjælpe dig med at bruge disse rammer bedre.

Brug fragment i stedet for div

Mange gange ønsker vi at have flere komponenter, og da gengivelse kun tillader en komponent at vende tilbage, bruger vi div-tag til at indeholde alle vores komponenter. Dette tilføjer et ekstra HTML-element i vores dokument.

I henhold til den officielle guide

Undertiden bryder vi HTML-semantik, når vi tilføjer
elementer til vores JSX for at få vores React-kode til at fungere, især når vi arbejder med lister (
    ,
      og
      ) og HTML <-tabellen>. I disse tilfælde bør vi snarere bruge React Fragments til at gruppere flere elementer.
import React, {Fragment} fra 'react';

funktion ListItem ({item}) {
  Vend tilbage (
    
      
{item.term}       
{item.description}        ); } funktion Ordliste (rekvisitter) {   Vend tilbage (     
      {props.items.map (item => (                ))}        ); }

For mere information, se dokumentationen til fragmenter.

Brug sammenhæng mere

Som embedsmændene siger om det, giver Context en måde at videregive data gennem komponenttræet uden at skulle give rekvisitter manuelt på alle niveauer.

Så hvis du har flere komponenter, der har brug for en værdi, så brug kontekst. Hvis du kun har en enkelt underordnet komponent, der har brug for denne værdi, skal du bruge kompositioner.

et eksempel til at indstille tema fra de officielle dokumenter,

tema-context.js

eksport konst temaer = {
  lys: {
    forgrund: '# 000000',
    baggrund: '#eeeeee',
  },
  mørke: {
    forgrund: '#ffffff',
    baggrund: '# 222222',
  },
};
export const ThemeContext = React.createContext (
  themes.dark // standardværdi
);

tema-button.js

import {ThemeContext} fra './theme-context';
klasse ThemedButton udvider React.Component {
  render () {
    lad rekvisitter = this.props;
    lad tema = this.context;
    Vend tilbage (
      
    );
  }
}
ThemedButton.contextType = ThemeContext;
eksport standard ThemedButton;

app.js

import {ThemeContext, themes} fra './theme-context';
import ThemedButton fra './themed-button';
// En mellemkomponent, der bruger ThemedButton
funktion Værktøjslinje (rekvisitter) {
  Vend tilbage (
    
      Skift tema
    
  );
}
klasse-app udvider React.Component {
  konstruktør (rekvisitter) {
    super (rekvisitter);
    this.state = {
      tema: temaer.lys,
    };
this.toggleTheme = () => {
      this.setState (tilstand => ({
        tema:
          state.theme === themes.dark
            ? themes.light
            : Theme.dark,
      }));
    };
  }
render () {
    // Knappen ThemedButton inde i ThemeProvider
    // bruger temaet fra tilstand, mens det udenfor bruger
    // standard mørke tema
    Vend tilbage (
      
        
          
        
        <§>
          
        
      
    );
  }
}
ReactDOM.render (, document.root);

Har mindst en fejlgrænse

Reaktion 16 kommer med en fantastisk funktion Fejlgrænser. Som navnet antyder, begrænser det fejlen for alle underordnede komponenter. Ideen er meget enkel. Opret en React-komponent, og brug den som overordnet, uanset hvor du vil håndtere fejlene. Hvis der er nogen fejl i din underordnede komponent, kaldes din fejlbegrænsningskomponent til at håndtere fejlen.

Husk, at gengivelsesfejl håndteres ved hjælp af fejlgrænser. Nødvendige fejl, såsom i begivenhedshåndterere, skal håndteres ved hjælp af javascript-prøve / fangstblokke.

Brug componentDidCatch () til at logge fejloplysninger.

klasse ErrorBoundary udvider React.Component {
  konstruktør (rekvisitter) {
    super (rekvisitter);
    this.state = {hasError: false};
  }
statisk getDerivedStateFromError (fejl) {
    // Opdater tilstand, så den næste gengivelse viser dropback-brugergrænsefladen.
    return {hasError: true};
  }
componentDidCatch (fejl, info) {
    // Du kan også logge fejlen til en fejlrapporteringstjeneste
    logErrorToMyService (fejl, info);
  }
render () {
    if (this.state.hasError) {
      // Du kan gengive ethvert brugerdefineret Fallback UI
      return 

Der gik noget galt.

;     }
returner denne. børnene;
  }
}

Derefter kan du bruge det som en almindelig komponent:


  

Hvis ErrorBoundary-komponenten har en fejl i sig selv, kan den ikke håndtere den .

Funktionen var der i React 15 ved navn unstable_handleError.This metode fungerer ikke længere, og du bliver nødt til at ændre den til componentDidCatch i din kode fra den første 16 beta-udgivelse.

Til denne ændring har React leveret en kodemod til automatisk at migrere din kode.

Brug produktionsopbygning i LIVE-miljø

Officielt websted har listet mange konfigurationer, der kan øge din ydelse. Glem ikke at tjekke dem ud, før de implementeres i LIVE-miljøet.

Tjek guiden her, reactjs.org/docs/optimizing-performance

Det tager kun 10 minutter at konfigurere og giver din app en forbløffende ydeevne.

Brug refs til at interagere med barnet

Vi kan bruge Refs til at udløse animation, valg af tekst eller styre fokus.

For eksempel,

For at indstille fokus i React, kan vi bruge Refs to DOM-elementer.

Ved hjælp af dette opretter vi først en ref til et element i JSX i en komponentklasse:

klasse CustomTextInput udvider React.Component {
  konstruktør (rekvisitter) {
    super (rekvisitter);
    // Opret en ref for at gemme textInput DOM-elementet
    this.textInput = React.createRef ();
  }
  render () {
  // Brug 'ref' tilbagekaldet til at gemme en henvisning til tekstindtastningen DOM
  // element i et forekomstfelt (for eksempel this.textInput).
    Vend tilbage (
      
    );
  }
}

Derefter kan vi fokusere det andetsteds i vores komponent, når det er nødvendigt:

fokus() {
  // Fokusér eksplicit tekstindtastningen ved hjælp af den rå DOM API
  // Bemærk: Vi får adgang til "aktuel" for at få DOM-knuden
  this.textInput.current.focus ();
}

For mere information, se programmatisk-styring-fokus.

Brug kodespaltning

Hvis du bruger CRA (opret reager app) eller NextJs, vil der allerede være en webpack-konfigurationsfil. Det opretter en enkelt fil (bundt), som vil indeholde hele appen. Hvis du nu bruger tredjepartsbiblioteker, eller din app bliver større, vil din bundtfil også være større. Når en bruger kommer til webstedet, downloader browseren hele bundtfilen og gengiver webstedet. Dette kan bremse dit websted drastisk, så kodespaltning giver den genererede mulighed for at splitte og oprette flere output. Så browseren indlæser det passende bundt, når den har brug for det. Til gengæld forbedrer webstedsbelastningstiden.

Vi kan bruge React.lazy til at opnå dette,

Officiel note: React.lazy og Suspense er endnu ikke tilgængelig til rendering på serversiden. Hvis du vil udføre kodespaltning i en server gengivet app, anbefaler vi stadig React Loadable. Det har en dejlig guide til spaltning af pakker med gengivelse på serversiden.

Du kan opdele din kode på forskellige måder, men et godt udgangspunkt er baseret på ruter,

De fleste mennesker på nettet er vant til at overføre sider, der tager noget tid at indlæse. Du har også en tendens til at gendanne hele siden på én gang, så det er usandsynligt, at dine brugere interagerer med andre elementer på siden på samme tid.

Her er et eksempel på, hvordan du opsætter rutebaseret kode, der opdeles i din app ved hjælp af biblioteker som React Router med React.lazy.

import {BrowserRouter som router, rute, switch} fra 'react-router-dom';
import React, {Suspense, dozy} fra 'react';
const Home = doven (() => import ('./ ruter / Hjem'));
const About = doven (() => import ('./ ruter / Om'));
const App = () => (
  
     Indlæser ... 
}>                                         );

Spænding er intet andet end en tilbageslagsmekanisme. Hvis det krævede bundt ikke er indlæst endnu, vises det. Du kan tilføje en din spinner her for at vise indlæsningstegn til dine brugere.

Du kan endda bruge ErrorBoundary som overordnet til Suspense til at håndtere andre fejl såsom netværksfejl!

React.lazy understøtter i øjeblikket kun standardeksport. Så hvis du vil bruge den til navngivet eksport, skal du tjekke navn-eksport.

Statisk type kontrol

Javascript er ikke typesprog, og mange af problemerne opstår på grund af forkerte typer.

Vi kan bruge forskellige typer brikker, der findes på markedet, men et berømt og begyndervenligt værktøj er Flow. Det er udviklet på Facebook og bruges ofte sammen med React. Det giver dig mulighed for at kommentere variabler, funktioner og React komponenter med en syntaks af speciel type og fange fejl tidligt. Du kan læse en introduktion til Flow for at lære dets grundlæggende. trin for trin instruktioner er givet i denne officielle reaktionsvejledning.

Bonus tip

Sørg for, at din webapplikation kun kan betjenes fuldt ud med tastaturet,

  • WebAIM taler om tastaturtilgængelighed

Tak fordi du læste!

Skriv kommentarer, hvis du har nogle forslag eller gerne vil tilføje et punkt / punkter, eller hvis du har bemærket en fejl / skrivefejl!

P. S. Hvis du fandt, at denne artikel var nyttig, klap! [føles givende og giver motivation til at fortsætte med at skrive].

For mere information,

tjek den avancerede guide til officiel guide, https://reactjs.org/docs/getting-started.html