Kas ir React “steits”? / State

Apsveriet dažādus modinātājpulksteņa režīmus un situācijas, kurās jūs tos izmantotu. Parasti jums ir ieslēgts modinātājs, lai iestatītu pamošanās laiku, izslēgts modinātājs, kad šī funkcija nav nepieciešama, un atlikšana, jeb “snauda”, lai pasnaustu un tiktu pamodināts atkārtoti pēc dažām papildus miega minūtēm.

Lai iestatītu šos režīmus, pulkstenim nav jāpievieno nekas papildus. Tās ir parastas iebūvētas funkcijas, kuras var iestatīt, nospiežot pogu. Ja izveidojat šo līdzekli React lietotnē, varat izveidot komponentu ar nosaukumu pulkstenis un pēc tam analizēt statusa vērtības, izmantojot rekvizītus, jeb “props”.

function Pulkstenis(props) {
    return (
        <h1>{props.status}</h1>
);
};


export default Pulkstenis;

Rekvizīti, jeb PROPS…

Atsauksim atmiņā: rekvizīti, jeb props ir React funkcija, kas būtībā ļauj pārlūkprogrammā saglabāt informāciju par lietotāja interfeisu. Programmā React jums ir arī cits veids, kā to izdarīt, izmantojot līdzīgu koncepciju, ko sauc par steitiem “state”, kas arī ļauj viegli mainīt komponenta darbību, lai tas atbilstu konkrētajai vajadzībai.

Kas? Ko? Kāpēc?

Līdz šī raksta beigām varēsiet aprakstīt React “steits” un to, kāpēc izstrādātāji to izmanto, lai kontrolētu, kas tiek rādīts pārlūkprogrammā no komponenta. Tas palīdz domāt par “steitu” ,kā komponenta iekšējiem datiem, kas nosaka komponenta pašreizējo uzvedību. To bieži izmanto, lai saglabātu datus, kas ietekmē komponenta darbību. Steiti ir svarīgi, jo tie ļauj komponentiem sinhronizēt darbības vienam ar otru un nodrošināt, ka jūsu lietotne darbojas, kā paredzēts, piemēram, ja viens komponents atjaunina savu “steitu”, automātiski tiks atjaunināti arī visi pārējie komponenti, kas ir atkarīgi no šī steita. Tas nozīmē, ka komponents saviem bērniem nosūta savu stāvokli, izmantojot rekvizītus (props). Ja pakārtotajiem komponentiem ir savi mazbērnu komponenti, tad pakārtotajiem komponentiem var būt daži steiti, kas mums nosūta šo mazbērnu komponentu rekvizītus. Galvenais veids, kā mainīt steitu, ir mainīt tā mainīgos. Kad komponents ir izveidots, tas iegūst sākotnējo “steitu”. Steits tiek izmantots, lai inicializētu komponenta īpašības. Komponenti var būt vai nu ar “steitu”, vai bez “steita”, bet ko tieši tas nozīmē? Lai iegūtu labāku izpratni, izpētīsim katra piemēru. Pirmais ir lietotnes komponents, kuram nav definēts steits.

Ar steitu un bez Steita…

funcion App() {

return <h1>Komponents bez steita</h1>

};

Tas veic vienu darbību, kas ir padarīt tekstu par “bezsteita” komponentu, un nākošais salīdzināšanai ir “steita” funkcijas komponents…

function App() {

const [ word, setWord ] = React.useState("Sveiki");

return (

<div>

<h1>Komponenta steita vērtība {word}</h1>

</div>

);

};

Šis komponents arī atveido dažus tekstus, bet atsaucas uz mainīgo, lai to izdarītu. Mēs izpētīsim, kā tas darbojas nedaudz vēlāk.

Pagaidām ievērojiet sintaksi, izmantojot lietotnes funkcijas pamatteksta pirmo rindiņu. Ja esat iepazinies ar to, kā masīvu destrukturizācija darbojas vienkāršā JavaScript. Iespējams, ka šī koda rindiņa jums jau ir saprotama, taču, lai lietas būtu skaidras, apsveriet piemēru masīvu, ko sauc par augļiem un kurā ir trīs virknes: ābols, bumbieris un plūme.

var augļi = [ 'ābols', 'bumbieris', 'plūme' ];

Ar savu ES6 versiju JavaScript ieviesa masīva destrukturēšanas koncepciju, kas ļauj piešķirt vairākus mainīgos no masīva, izmantojot vienu koda rindiņu. Citiem vārdiem sakot, ābolu, bumbieru un plūmju auglim 1, augļiem 2 un augļiem 3 varat piešķirt mainīgos lielumus ātri, nevis pa vienam.

var augļi = [ 'ābols', 'bumbieris', 'plūme' ];




const augļi = [ 'ābols', 'bumbieris', 'plūme' ];

const [ auglis1, auglis2, auglis3 ] = augļi;

Paturot to prātā, atgriezīsimies pie šīs rindiņas stateful komponentā.

funcion App() {

const [ word, setWord ] = React.useState("Sveiki") ;

return (

<div>

<h1> Steita vērtība: {word}</h1>

) ;

};

Ņemiet vērā, ka izmantotā sintakse ir līdzīga tikko pārbaudītajam masīva destrukturizācijas piemēram, bet ar interesantu koda daļu. React.useState. Āķi (hooks) ļauj izstrādātājiem piesaistīt kādu citādi nepieejamu funkcionalitāti. (par hooks es jau rakstiju iepriekšējos rakstos) Piemēram, lai piekļūtu steita objektam, jāizmanto āķis useState. Lai labāk saprastu, kas tiek destrukturēts lietotnes komponentā, izsauksim konsoles žurnālu “console.log” uz useState āķi.

function App() {

const [ word, setWord ] = React.useState("Sveiks");

};

console.log(React.useState(Sveiks));

Izvade atklāj masīvu, kurā ir divas lietas, virkne “Sveiks” un funkcija. Šajā gadījumā “Sveiks” ir vārda steits mainīgajam piešķirtā stāvokļa vērtība. Funkcija ir iebūvēta, un tā nav deklarēta. Funkciju var destrukturēt ar jebkuru nosaukumu, ko vēlaties, taču ir jāievēro konvencija. Ja steita mainīgā nosaukumu iestatāt kā “Sveiciens”, tad destrukturētā steita funkcijai jābūt setSveiciens. Tas ir tāpēc, ka otrais destrukturētais mainīgais ir funkcija, kas tiks izmantota, lai atjauninātu mainīgā statusu.

function App() {

const [ Sveiciens, setSveiciens ] = React.useState("Čau");

return (

<div>

<h1>Steita vērtība: {Sveiciens}</h1>

</div>

);

};

Apskatīsim šī statusa funkcijas komponenta atjaunināto versiju.

Nobeigumā…

Ņemiet vērā, ka mainīgais setSveiciens faktiski netiek palaists, tas ir kaut kas, kas tiek darīts citur. Kādā no nākošajiem rakstiem pastāstīšu par to, kā jūs varat paplašināt šo kodu ar klikšķināmu pogu, lai atjauninātu statusu. Šajā rakstā jūs uzzinājāt par steitu React, jo īpaši par steitu saturošu un bezSteitu komponentu īpašībām lietotnē.