Suunnittelee tulla edistyneeksi React-kehittäjäksi

Lisää reagointitasoa käyttämällä näitä tekniikoita!

React-logo

Me kaikki rakastamme ReactJS: ää. Se on yksi parhaimmista ja suosituimmista tavoista luoda SPA (yhden sivun sovellus). Se tarjoaa joustavuutta ja mahdollisuuksia. Sillä on hieno ominaisuus käyttää sitä yhden komponentin luomiseen olemassa olevaan verkkosivustoon tai käyttää sitä koko verkkosivuston luomiseen tyhjästä.

Nyt ReactJS on kehys, jota käytetään monissa muissa kehyksissä tai työkalusarjoissa, kuten NextJs, GatsByJs, Razzle, AfterJs jne. Joten paremmaksi ReactJS-kehittäjäksi tuleminen puolestaan ​​auttaa sinua paremmin käyttämään näitä kehyksiä.

Käytä fragmenttia div: n sijasta

Monta kertaa haluamme pitää useita komponentteja ja koska renderöinti sallii vain yhden komponentin paluun, käytämme div-tagia kaikkien komponenttiemme sisältämiseen. Tämä lisää ylimääräisen HTML-elementin asiakirjaan.

Virallisen oppaan mukaan

Joskus rikkomme HTML-semantiikkaa, kun lisäämme
-elementtejä JSX: ään saadaksesi React-koodimme toimimaan, varsinkin kun työskentelemme luetteloiden (
    ,
      ja
      ) ja HTML -työkalun kanssa. Näissä tapauksissa meidän pitäisi mieluummin käyttää React Fragmentteja useiden elementtien ryhmittelemiseen.
      Tuo reagoi, {Fragment} kohdasta 'react';
      
      funktio ListItem ({item}) {
        palata (
          
            
      {item.term}       
      {item.description}        ); } toiminto Sanasto (rekvisiitta) {   palata (     
            {props.items.map (item => (                ))}        ); }

      Lisätietoja on Fragments-ohjeissa.

      Käytä enemmän asiayhteyttä

      Kuten virkamiehet sanovat, konteksti tarjoaa tavan välittää tietoja komponenttipuun läpi joutumatta siirtämään rekvisiitta manuaalisesti kaikilla tasoilla.

      Joten jos sinulla on useita komponentteja, jotka tarvitsevat arvon, käytä konteksttia. Jos sinulla on vain yksi alakomponentti, joka tarvitsee tämän arvon, käytä koostumuksia.

      yksi esimerkki aiheen asettamisesta virallisista asiakirjoista,

      teema-context.js

      vie const teemat = {
        valo: {
          etuala: '# 000000',
          tausta: '#eeeeee',
        },
        tumma: {
          etuala: '#ffffff',
          tausta: '# 222222',
        },
      };
      export const ThemeContext = React.createContext (
        themes.dark // oletusarvo
      );

      teemalla-button.js

      Tuo {ThemeContext} hakemistosta './theme-context';
      luokan ThemedButton laajentaa React.Component {
        tehdä () {
          anna rekvisiitta = this.props;
          anna teema = tämä.konteksti;
          palata (
            <-painike
              {...rekvisiitta}
              style = {{backgroundColor: theme.background}}
            />
          );
        }
      }
      ThemedButton.contextType = ThemeContext;
      vie oletusarvoinen ThemedButton;

      app.js

      Tuo {ThemeContext, themes} './theme-context';
      tuo ThemedButton './themed-Button' -kohdasta;
      // Välikomponentti, joka käyttää ThemedButtonia
      toiminto Työkalurivi (rekvisiitta) {
        palata (
          
            Vaihda teema
          
        );
      }
      luokan sovellus laajentaa React.Component {
        rakentaja (rekvisiitta) {
          Super (tarpeistoa);
          tämä.valtio = {
            teema: teemat.valo,
          };
      this.toggleTheme = () => {
            this.setState (tila => ({
              teema:
                osavaltion.theme === teemat.tark
                  ? themes.light
                  : teemat.dark,
            }));
          };
        }
      tehdä () {
          // TeemaPainike-painike ThemeProviderin sisällä
          // käyttää teemaa tilasta, kun taas ulkopuolinen käyttää
          // oletus tumma teema
          palata (
            
              
                
              
              
                                     );   } }
      ReactDOM.render (, document.root);

      Käytä ainakin yhtä virherajaa

      React 16 sisältää hämmästyttävän ominaisuusvirherajat. Kuten nimestä voi päätellä, se rajoittaa kaikkien alakomponenttien virheen. Idea on hyvin yksinkertainen. Luo React-komponentti ja käytä sitä vanhempana missä haluat käsitellä virheitä. Jos lapsikomponentissasi on virhe, virherajakomponentti kutsutaan käsittelemään virhe.

      Muista, että renderointivirhe käsitellään virherajoilla. Pakolliset virheet, kuten tapahtumakäsittelijöissä, tulee käsitellä javascript try / catch -lohkoilla.

      Luo virheiden tiedot komponenttiDidCatch (): n avulla.

      luokka ErrorBoundary laajentaa React.Component {
        rakentaja (rekvisiitta) {
          Super (tarpeistoa);
          this.state = {hasError: false};
        }
      staattinen getDerivedStateFromError (virhe) {
          // Päivitä tila, jotta seuraava renderöinti näyttää varmuuskopion käyttöliittymän.
          return {hasError: true};
        }
      komponentDidCatch (virhe, tiedot) {
          // Voit kirjata virheen myös virheraportointipalveluun
          logErrorToMyService (virhe, tiedot);
        }
      tehdä () {
          if (this.state.hasError) {
            // Voit tehdä minkä tahansa mukautetun varaliittymän
            return 

      Jokin meni pieleen.

      ;     }
      palauta tämä.props.lapset;
        }
      }

      Sitten voit käyttää sitä normaalina komponenttina:

      
        
      

      Jos ErrorBoundary-komponentissa on virhe sinänsä, se ei voi käsitellä sitä .

      Ominaisuus oli siellä React 15 -nimellä, jonka nimi on unstable_handleError. Tämä menetelmä ei enää toimi, ja joudut vaihtamaan sen komponenttiinididCatch-koodiin koodista alkaen ensimmäisestä 16 beetaversiosta.

      Tätä muutosta varten React on antanut koodiohjelman, joka siirtää koodisi automaattisesti.

      Käytä tuotantorakennusta LIVE-ympäristössä

      Virallisella sivustolla on lueteltu monia kokoonpanoja, jotka voivat parantaa suorituskykyäsi. Älä unohda tarkistaa niitä ennen käyttöönottoa LIVE-ympäristöön.

      Katso opas täältä, reactjs.org/docs/optimizing-performance

      Konfigurointi vie vain 10 minuuttia ja antaa sovelluksellesi uskomattoman suorituskyvyn.

      Käytä Refs vuorovaikutuksessa lapsen kanssa

      Voimme käyttää Refs: ää animaation käynnistämiseen, tekstin valintaan tai tarkennuksen hallintaan.

      Esimerkiksi,

      Voit asettaa tarkennuksen Reaktissa käyttämällä Refs to DOM -elementtejä.

      Tämän avulla luomme ensin viite komponenttiluokan JSX: n elementille:

      luokka CustomTextInput laajentaa React.Component {
        rakentaja (rekvisiitta) {
          Super (tarpeistoa);
          // Luo viite tallentaaksesi textInput DOM -elementin
          this.textInput = React.createRef ();
        }
        tehdä () {
        // Käytä `ref`-takaisinsoittoa tallentaaksesi viittauksen tekstinsyöttöön DOM
        // elementti esiintymän kentässä (esimerkiksi this.textInput).
          palata (
            
          );
        }
      }

      Sitten voimme keskittää sen muualle komponenttiin tarvittaessa:

      keskittyä () {
        // Keskity tekstinsyöttö suoraan RAW-DOM-sovellusliittymällä
        // Huomaa: Käytämme "nykyistä" saadaksemme DOM-solmun
        this.textInput.current.focus ();
      }

      Lisätietoja on ohjeaiheessa Ohjelmointi-hallinta-fokus.

      Käytä koodinjakoa

      Jos käytät CRA: ta (luo reaktisovellus) tai NextJ: tä, siellä on jo verkkopaketin määritystiedosto. Se luo yhden tiedoston (nipun), joka sisältää koko sovelluksesi. Nyt jos käytät kolmannen osapuolen kirjastoja tai sovelluksesi kasvaa, niin myös kimputiedostosi on suurempi. Kun käyttäjä tulee verkkosivustolle, selain lataa koko paketitiedoston ja sitten renderoi verkkosivun. Tämä voi hidastaa verkkosivustoasi rajusti, joten koodin jakaminen antaa luodun jakaa ja luoda useita lähtöjä. Joten selain lataa asianmukaisen paketin tarvittaessa. Paranna puolestaan ​​sivuston latausaikaa.

      Voimme käyttää React.lazy -sovellusta tämän saavuttamiseen,

      Virallinen huomautus: React.lazy ja Suspense ei ole vielä saatavana palvelinpuolen renderointiin. Jos haluat jakaa koodin jakoon palvelimen hajotetussa sovelluksessa, suosittelemme silti React Loadable -sovellusta. Siinä on mukava opas nipun jakamiseen palvelinpuolen renderoinnilla.

      Voit jakaa koodisi eri tavoin, mutta hyvä lähtökohta perustuu reiteihin,

      Suurin osa verkossa olevista ihmisistä on tottunut sivujen siirtymiin lataamiseen vie aikaa. Yleensä myös renderoit koko sivun kerralla, joten käyttäjän tuskin tulee olla vuorovaikutuksessa muiden sivun elementtien kanssa samanaikaisesti.

      Tässä on esimerkki kuinka määrittää reittipohjainen koodin jakaminen sovellukseesi kirjastojen, kuten React Router, kanssa React.lazy -kirjastoilla.

      Tuo {BrowserRouter reitittimenä, reitillä, kytkimellä} "react-router-dom" -sovelluksesta;
      Tuo reagoi, {Suspense, laiska} "reagoi";
      const Koti = laiska (() => Tuo ('./ reitit / Koti'));
      const Tietoja = laiska (() => Tuo ('./ reitit / Tietoja'));
      const App = () => (
        
           Ladataan ... }>
            
              
              
            
          
        
      );

      Jousitus ei ole muuta kuin varamekanismi. Jos vaadittua nipua ei ole vielä ladattu, se näytetään. Voit lisätä kehräsi tähän näyttääksesi latausmerkin käyttäjillesi.

      Voit jopa käyttää ErrorBoundarya vanhempana Suspense-ohjelmaan muiden virheiden, kuten verkkovirheiden, käsittelemiseksi!

      React.lazy tukee tällä hetkellä vain oletusvientiä. Joten jos haluat käyttää sitä nimitetyn viennin kanssa, tutustu nimettyyn vientiin.

      Staattisen tyyppitarkastus

      Javascript ei ole kirjoitettu kieli, ja monet ongelmista johtuvat vääristä tyypeistä.

      voimme käyttää markkinoilla saatavilla olevia erityyppisiä tammeja, mutta yksi kuuluisa ja aloittelijoille sopiva työkalu on Flow. Se on kehitetty Facebookissa ja sitä käytetään usein Reaktin kanssa. Sen avulla voit merkitä muuttujat, toiminnot ja reagoida komponentit erityistyyppisyntaksillä ja korjata virheet aikaisin. Voit lukea johdannon Flow: sta oppiaksesi sen perusteet. askel askeleelta ohjeet annetaan tässä virallisessa reagointioppaassa.

      Bonuskärki

      Varmista, että verkkosovellustasi voidaan käyttää täysin vain näppäimistöllä,

      • WebAIM puhuu näppäimistön käytettävyydestä

      Kiitos, että luit!

      Jätä kommentteja, jos sinulla on ehdotuksia / haluat lisätä pisteen / pisteitä tai jos huomasit virheitä / kirjoitusvirheitä!

      Loppusanat Jos pidit tästä artikkelista hyödyllistä, taputtele! [tuntuu palkitsevalta ja antaa motivaaation jatkaa kirjoittamistani].

      Lisätietoja,

      tutustu Advanced Guide -oppaan viralliseen oppaan, https://reactjs.org/docs/getting-started.html

      dupliceopportunita.com © 2020