React.js algajatele - rekvisiidid ja olek selgitatud

React.js on üks enimkasutatavaid JavaScripti teeke, mida iga kasutajaliidese arendaja peaks teadma. Rekvisiidi ja oleku ning nendevaheliste erinevuste mõistmine on suur samm Reacti õppimise suunas.

Selles blogipostituses selgitan, mis on rekvisiidid ja olek, ning selgitan ka mõningaid nende kohta enim küsitud küsimusi:

  • Mis on rekvisiidid?
  • Kuidas edastate rekvisiitidega andmeid?
  • Mis on riik?
  • Kuidas värskendada komponendi olekut?
  • Mis juhtub, kui riik muutub?
  • Kas ma saan olekut kasutada igas komponendis?
  • Millised on rekvisiitide ja riigi erinevused?
Kui olete Reacti jaoks täiesti algaja, on mul algajatele mõeldud Reacti kohta õpetussari.

Mis on rekvisiidid?

Rekvisiidid on omaduste kohta lühikesed ja neid kasutatakse andmete edastamiseks React'i komponentide vahel. Reakti andmevoog komponentide vahel on ühesuunaline (ainult vanemalt lapsele).

Kuidas edastate rekvisiitidega andmeid?

Siin on näide, kuidas rekvisiite kasutades saab andmeid edastada:

class ParentComponent extends Component { render() { return (  ); } } const ChildComponent = (props) => { return 

{props.name}

; };

Esiteks peame määrama / hankima mõned andmed vanemkomponendilt ja määrama need alamkomponendi atribuudile „prop”.

„Nimi” on siin määratletud rekvisiit ja sisaldab tekstiandmeid. Siis saame andmeid edastada rekvisiitidega, nagu annaksime funktsioonile argumendi:

const ChildComponent = (props) => { // statements };

Lõpuks kasutame rekvisiitandmetele juurdepääsu saamiseks ja renderdamiseks punktmärkimist:

return 

{props.name}

;

Rekvisiitide kasutamist saate vaadata ka minu videost:

Mis on riik?

Reactil on veel üks spetsiaalne sisseehitatud objekt nimega olek, mis võimaldab komponentidel oma andmeid luua ja hallata. Nii et erinevalt rekvisiitidest ei saa komponendid andmeid olekuga edastada, kuid nad saavad neid sisemiselt luua ja hallata.

Siin on näide oleku kasutamise kohta:

class Test extends React.Component { constructor() { this.state = { id: 1, name: "test" }; } render() { return ( 

{this.state.id}

{this.state.name}

); } }

Kuidas värskendada komponendi olekut?

Olekut ei tohiks otseselt muuta, kuid seda saab muuta spetsiaalse meetodi abil setState( ).

this.state.id = “2020”; // wrong this.setState({ // correct id: "2020" });

Mis juhtub, kui riik muutub?

OK, miks me peame kasutama setState( )? Miks me üldse vajame riigiobjekti ennast? Kui esitate neid küsimusi, ärge muretsege - saate riigist varsti aru :) Lubage mul vastata.

Oleku muutus toimub kasutaja sisendi, sündmuse käivitamise ja muu põhjal. Samuti renderdatakse komponendid React (olekuga) olekus olevate andmete põhjal. Esialgne teave.

Nii et oleku muutumisel saab React informatsiooni ja renderdab DOM-i kohe uuesti - mitte kogu DOM, vaid ainult värskendatud olekuga komponent. See on üks põhjustest, miks reageerimine on kiire.

Ja kuidas saab React märguandeid? Sa arvasid seda: koos setState( ). setState( )Meetod käivitab uuesti muudab protsessi ajakohastatud osad. React saab teavet, teab, milliseid osi (osasid) muuta, ja teeb seda kiiresti ilma kogu DOM-i ümber renderdamata.

Kokkuvõttes on oleku kasutamisel kaks olulist punkti, millele peame tähelepanu pöörama:

  • Olekut ei tohiks otseselt muuta - seda setState( )tuleks kasutada
  • Riik mõjutab teie rakenduse toimivust ja seetõttu ei tohiks seda asjatult kasutada

Kas ma saan olekut kasutada igas komponendis?

Teine oluline küsimus, mida võiksite riigi kohta küsida, on koht, kus seda täpselt kasutada saame. Algusaegadel võis olekut kasutada ainult klassi komponentides , mitte funktsionaalsetes komponentides.

Seetõttu tunti funktsionaalseid komponente ka kodakondsuseta komponentidena. Kuid pärast React Hooksi kasutuselevõttu saab olekut nüüd kasutada nii klassis kui ka funktsionaalsetes komponentides.

Kui teie projekt ei kasuta React Hooksi, saate olekut kasutada ainult klassi komponentides.

Millised on rekvisiitide ja riigi erinevused?

Lõpuks võtame uuesti kokku ja vaatame peamised erinevused rekvisiitide ja riigi vahel:

  • Komponendid saavad andmeid rekvisiitidega väljastpoolt, samas kui nad saavad oma andmeid olekuga luua ja hallata
  • Rekvisiite kasutatakse andmete edastamiseks, olekut aga andmete haldamiseks
  • Rekvisiitide andmed on kirjutuskaitstud ja neid ei saa muuta komponent, mis neid väljastpoolt vastu võtab
  • Osariigi andmeid saab oma komponendi abil muuta, kuid need on privaatsed (neile ei pääse väljastpoolt)
  • Rekvisiite saab edastada ainult vanemkomponendilt lapsele (ühesuunaline voog)
  • Muutmisolek peaks toimuma setState ( )meetodi abil

React.js on tänapäeval üks enimkasutatavaid JavaScripti teeke, mida iga kasutajaliidese arendaja peaks teadma.

Loodan, et see artikkel aitab teil mõista rekvisiite ja seisukorda. Reacti kohta tuleb käsitleda ka muid olulisi asju ja neist jätkan hiljem oma järgmistes artiklites.

Kui soovite veebiarenduse kohta rohkem teada saada, jälgige mind julgelt Youtube'is !

Aitäh, et lugesid!