React Datu plūsmas skaidrojums

Šajā rakstā jūs uzzināsiet, kā detalizēti aprakstīt datu plūsmu no “vecākiem(parent)” uz “bērnu(child)”. Pēc tam jūs uzzināsiet, kāpēc koda paraugiem ir jābūt skaidriem un kodolīgiem. Visbeidzot, jūs sīkāk izpētīsiet datu plūsmu, aplūkojot vairāk piemēru. Tam vajadzētu darboties kā iepriekšējos rakstos iegūto zināšanu atsvaidzināšanai.

“Vecāku” un “bērnu” datu plūsma

Programmā React datu plūsma ir kā vienvirziena iela. Dažreiz tiek teikts, ka datu plūsma ir vienvirziena. Citiem vārdiem sakot, React dati plūst no vecākkomponenta uz pakārtoto komponentu. Datu plūsma sākas saknē un var plūst uz vairākiem ligzdošanas līmeņiem, sākot no saknes komponenta (veckomponenta) līdz pakārtotajam komponentam, pēc tam uz mazbērnu komponentu un tālāk pa hierarhiju.

React lietotne sastāv no daudziem komponentiem, kas sakārtoti kā komponentu koks. Dati plūst no saknes komponenta uz visiem koka struktūras komponentiem, kuriem nepieciešami šie dati, izmantojot rekvizītus (props).

Balsti ir nemainīgi (nevar mainīt).

Šīs vienvirziena datu plūsmas divas galvenās priekšrocības ir tādas, ka tā ļauj izstrādātājiem:

• ātrāk izprast React lietotņu loģiku un
• vienkāršot datu plūsmu.

Šeit ir praktisks piemērs:

Iedomājieties, ka vecākais komponents nodod rekvizītu (nosaukumu) pakārtotajam komponentam. Pēc tam bērna komponents izmanto šo rekvizītu, lai atveidotu nosaukumu lietotāja saskarnē.

Vecākkomponents:

function Suns() {
    return (
        <Kucēns name="Maksis" bļodasForma="apaļa" bļodasStatuss="pilna" />
    );
};

Bērna komponents:

function Kucēns(props) {
    return (
        <div>
            {props.name} ir <Bļoda bļodasForma="apaļa" bļodasStatuss="pilna" />
        </div>
    );
};

Mazbērna komponents:

function Bļoda(props) {
    return (
        <span>
            {props.bļodasForma}-formēta bļoda, un tās pašreizējais {props.bļodasStatuss}
        </span>
    );
};