React.js pradedantiesiems - rekvizitai ir valstybės paaiškinimas

React.js yra viena iš plačiausiai naudojamų „JavaScript“ bibliotekų, kurią turėtų žinoti kiekvienas front-end kūrėjas. Suprasti, kas yra rekvizitai ir būsena bei jų skirtumai, yra didelis žingsnis siekiant išmokti „React“.

Šiame tinklaraščio įraše paaiškinsiu, kokie yra rekvizitai ir būsena, taip pat paaiškinsiu keletą dažniausiai užduodamų klausimų apie juos:

  • Kas yra rekvizitai?
  • Kaip perduoti duomenis su rekvizitais?
  • Kas yra valstybė?
  • Kaip atnaujinti komponento būseną?
  • Kas atsitinka pasikeitus būsenai?
  • Ar galiu naudoti būseną kiekviename komponente?
  • Kuo skiriasi butaforija ir valstybė?
Jei esate visiškai „React“ pradedantysis, turiu pamokų ciklą apie „React“ pradedantiesiems.

Kas yra rekvizitai?

Rekvizitas yra trumpas savybių apibūdinimas ir jie naudojami duomenims perduoti tarp „React“ komponentų. „React“ duomenų srautas tarp komponentų yra vienakryptis (tik nuo tėvo iki vaiko).

Kaip perduoti duomenis su rekvizitais?

Štai pavyzdys, kaip duomenis galima perduoti naudojant atramas:

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

{props.name}

; };

Pirma, turime apibrėžti / gauti tam tikrus duomenis iš pirminio komponento ir priskirti juos antrinio komponento atributui „prop“.

„Vardas“ čia yra apibrėžtas rekvizitas ir jame yra teksto duomenų. Tada mes galime perduoti duomenis su rekvizitais, pavyzdžiui, suteikdami argumentą funkcijai:

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

Ir galiausiai, mes naudojame taškinę žymėjimą, kad pasiektume rekvizito duomenis ir juos perteiktume:

return 

{props.name}

;

Taip pat galite žiūrėti mano vaizdo įrašą, kad sužinotumėte, kaip naudotis rekvizitais:

Kas yra valstybė?

„React“ turi dar vieną specialų įmontuotą objektą, vadinamą būsena, leidžiančią komponentams kurti ir tvarkyti savo duomenis. Taigi, skirtingai nei rekvizitai, komponentai negali perduoti duomenų su būsena, tačiau jie gali juos kurti ir valdyti viduje.

Štai pavyzdys, parodantis, kaip naudoti būseną:

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

{this.state.id}

{this.state.name}

); } }

Kaip atnaujinti komponento būseną?

Būsena neturėtų būti tiesiogiai modifikuojama, tačiau ją galima modifikuoti specialiu metodu, vadinamu setState( ).

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

Kas atsitinka pasikeitus būsenai?

Gerai, kodėl mes turime naudoti setState( )? Kodėl mums apskritai reikalingas pats valstybės objektas? Jei klausiate šių klausimų, nesijaudinkite - greitai suprasite valstybę :) Leiskite man atsakyti.

Būsenos pasikeitimas įvyksta atsižvelgiant į vartotojo įvestį, įvykio suaktyvinimą ir pan. Be to, „React“ komponentai (su būsena) atvaizduojami remiantis būsenos duomenimis. Valstybė turi pirminę informaciją.

Taigi, pasikeitus būsenai, „React“ gauna informaciją ir nedelsdamas perteikia DOM - ne visą DOM, o tik komponentą su atnaujinta būsena. Tai yra viena iš priežasčių, kodėl reakcija yra greita.

Ir kaip „React“ gauna pranešimą? Spėjote: su setState( ). setState( )Metodas sukelia pakartotinai teikti procesas atnaujintas dalis. „React“ gauna informaciją, žino, kurią (-ias) dalį (-es) reikia pakeisti, ir daro tai greitai, neperduodamas viso DOM.

Apibendrinant, yra 2 svarbūs dalykai, į kuriuos turime atkreipti dėmesį naudodami būseną:

  • Būsena neturėtų būti keičiama tiesiogiai - ji setState( )turėtų būti naudojama
  • „State“ turi įtakos jūsų programos našumui, todėl jos nereikėtų naudoti be reikalo

Ar galiu naudoti būseną kiekviename komponente?

Kitas svarbus klausimas, kurį galite užduoti apie valstybę, yra tai, kur tiksliai galime jį naudoti. Pirmosiomis dienomis būsena galėjo būti naudojama tik klasės komponentuose , o ne funkciniuose komponentuose.

Štai kodėl funkciniai komponentai taip pat buvo vadinami komponentais be pilietybės. Tačiau po „ React Hooks“ įvedimo būsena dabar gali būti naudojama tiek klasėje, tiek funkciniuose komponentuose.

Jei jūsų projekte nenaudojami „React Hooks“, būseną galite naudoti tik klasės komponentuose.

Kuo skiriasi butaforija ir valstybė?

Galiausiai pakartokime ir pamatysime pagrindinius butaforijos ir valstybės skirtumus:

  • Komponentai gauna duomenis iš išorės su rekvizitais, tuo tarpu jie gali kurti ir tvarkyti savo duomenis naudodamiesi valstybe
  • Rekvizitai naudojami duomenims perduoti, o valstybė - duomenims valdyti
  • Rekvizitų duomenys yra tik skaitomi ir jų negali modifikuoti komponentas, gaunantis juos iš išorės
  • Narės duomenis galima modifikuoti pagal savo komponentą, tačiau jie yra privatūs (prie jų negalima prisijungti iš išorės)
  • Rekvizitus galima perduoti tik iš pirminio komponento vaikui (vienakryptis srautas)
  • Modifikuojanti būsena turėtų įvykti taikant setState ( )metodą

„React.js“ yra viena iš šiandien dažniausiai naudojamų „JavaScript“ bibliotekų, kurią turėtų žinoti kiekvienas front-end kūrėjas.

Tikiuosi, kad šis straipsnis padės jums suprasti rekvizitus ir būseną. Apie „React“ taip pat reikia aptarti kitus svarbius dalykus, kuriuos toliau rašysiu savo tolesniuose straipsniuose.

Jei norite sužinoti daugiau apie interneto plėtrą, nesivaržykite sekti mane „Youtube“ !

Ačiū, kad skaitėte!