React un JavaScript “Props” (rekvizītu) komponentu principi

Lai šis Jums būtu vieglāk izprotams jums vajadzētu būt pazīstamam ar React funkcionālo komponentu jēdzienu. React funkcionālie komponenti ir atkārtoti lietojami koda bloki, kas darbojas līdzīgi JavaScript funkcijai. Atcerieties, ka programmā JavaScript varat padarīt savas funkcijas elastīgākas, deklarējot tās ar parametriem, kas ļauj nodot vērtības kā argumentus, kad izsaucat funkciju.

function pievienoSkaitli(num1, num2) { /* funkcijas deklarācija ar parametriem */
console.log(num1*num2)
}


pievienoSkaitli(10, 10) /* vērtības, kas ir kā argumenti */

Programmā React varat veikt līdzīgu darbību, izmantojot kaut ko sauc par rekvizītiem (jeb “props”), kas tiek attēloti kā rekvizīti.

import React from 'react';
export function App(props) {
    return (
        <h1>{props.title}</h1>
    );
};

Šajā rakstā jūs uzzināsiet par rekvizītu objektu un to, kā izstrādātāji to izmanto, lai pārsūtītu datus no viena komponenta uz citu. Pēc tam izpētīsiet komponentu hierarhiju un uzzināsiet, kāpēc komponentiem ir iestatīta “vecāku” un “bērnu” struktūra.

JavaScript funkcionalitāte:

Pirms sākat šo “ceļojumu” ar rekvizītiem, apskatīsim vēl vienu JavaScript funkcionalitāti, kas palīdzēs jums saprast, kā darbojas rekvizīti. To sauc par JavaScript objektu.

JavaScript — objekts ir īpaša veida mainīgais, kas var saturēt daudzas vērtības.

Objektus izmantojat, ja nepieciešams saglabāt dažādu veidu saistītu datu grupas. Katrs datu tips ir pazīstams kā objekta rekvizīts, piemēram, pieņemsim, ka izveidojat objektu, ko sauc par augļi, kas satur veida, daudzuma un krāsas īpašības.

const augļi = {tips: "Ābols", daudzums:500, krāsa:"zaļš"};

Atcerieties, ka šie rekvizīti sastāv no nosaukuma un vērtību pāriem, un to objekta rekvizītiem varat piekļūt, izmantojot punkta apzīmējumu.

console.log(augļi.krāsa);

konsole šim piemēram izdos rezultātu:

zaļa

Rekvizītu, jeb .props nosūtīšana:

Programmā React varat izmantot līdzīgu paņēmienu, lai pārsūtītu datus no viena komponenta uz citu, izmantojot rekvizītu objektu vai vienkārši rekvizītus. Rekvizīti ļauj pārsūtīt datus no viena komponenta uz otru. Ir lietderīgi domāt par rekvizītiem kā argumentiem, ko komponents var pieņemt un kas tam tiek nodots, izmantojot JSX sintaksi, līdzīgi kā HTML atribūtus. Funkcijā jūs izmantojat atslēgvārdu .props (rekvizīti).

Tagad, kad esat iepazinies ar rekvizītu .props jēdzienu, izpētīsim piemēru, kā nosūtīt dažus rekvizītus komponentam un izdrukāt tos React lietotnē. Pieņemsim, ka failā index.js ir atvērts programmas React noklusējuma kods, jūs izsaucat lietotnes komponentu.

Lietotnes komponentā jūs atgriežat h1 virsrakstu ar statisku virsraksta tekstu. Kamēr šis kods darbojas, varat padarīt šo virsrakstu dinamisku, izmantojot rekvizītus.

index.js kods:

import React from 'react' ;
import ReactDOM from 'react-dom/client';


import App from './App.js'


ReactDOM.createRoot(
    document.querySelector('#root')
).render(<App title="Sveicināti" />)

App.js kods:

import React from 'react';


export function App() {
    return (
        <h1>{props.title}</h1>
    );
};

Tagad izpētīsim sintaksi, kas nepieciešama, lai to izveidotu. Saknes komponentā index.js vērtību, kuru vēlaties nodot lietotnes komponentam, nosūtat kā argumentu HTML atribūta veidā. Pēc tam lietotnes komponentā jūs pieņemat šo argumentu, izmantojot rekvizītu objektu. Lai to izdarītu, funkciju deklarācijai iekavās pievienojiet atslēgvārdu props. Visbeidzot, lai piekļūtu šī objekta rekvizītiem, izmantojiet punktu apzīmējumu, lai atsauktos uz objekta rekvizīta nosaukumu, kas tika nodots kā arguments ar HTML atribūtu.

Vēlreiz neaizmirstiet ievietot kodu figūriekavās, lai React zinātu, ka vēlaties strādāt ar rekvizītu props objektu, nevis statisku tekstu.

Tā kā rekvizīti būtībā ir JavaScript objekts, tas var pieņemt daudzus datu tipus, sākot no vienkāršiem veidiem, piemēram, virknēm un veseliem skaitļiem, līdz sarežģītākiem veidiem, piemēram, funkcijām, masīviem un objektiem. Līdz ar to rekvizīti sniedz izstrādātājiem lielāku elastību, veidojot komponentus un strādājot ar tiem, jo īpaši, ja vēlaties, lai datu plūsma jūsu lietotnē būtu dinamiska.

Kamēr jūs tikai izpētīsit pamata piemēru, lai dinamiski drukātu virsrakstu, vēlāk iegūsit iespēju praktizēt ar sarežģītākām datu struktūrām, izmantojot palīgierīces. Tagad jūs esat iepazinies ar rekvizītu darbību, nosūtot datus starp komponentiem.

Datu plūsma:

Izpētīsim šo datu plūsmu nedaudz sīkāk. Kad divi komponenti sazinās savā starpā, komponents, kas nosūta rekvizītus, tiek saukts par vecāku, bet komponents, kas saņem rekvizītu datus, ir zināms kā bērns. Kā jūs tikko uzzinājāt, izmantojot piemēru, šīs vecāku un bērnu attiecības ļauj izmantot pagātnes datu vecāku komponentus līdz pakārtotajiem komponentiem, izmantojot rekvizītus.

Vecāku komponenti var arī nosūtīt tos pašus datus vairākiem pakārtotiem komponentiem. Tomēr ir svarīgi zināt, ka šī saziņa ir vienvirziena datu plūsma. Nav iespējams sazināties no pakārtotā komponenta atpakaļ uz vecākkomponentiem, izmantojot rekvizītus.

Tā vietā izstrādātāji izmanto citas pieejas. Pagaidām par to neuztraucieties, pirms pilnībā izprotat šo saziņas daļu. Vairāk par tiem varēsiet pētīt un uzzināsiet vēlāk. Lai gan rekvizīti ir ļoti spēcīgs React rīks, tiem ir daži ierobežojumi. Piemēram, jūs tikko uzzinājāt par to, kā nav iespējams nosūtīt datus no pakārtotā komponenta atpakaļ uz vecākkomponentu, izmantojot uzvednes. Vēl viens svarīgs ierobežojums ir saistīts ar to, ko sauc par “tīrajām funkcijām”.

Programmēšanā tīrā funkcija ir funkcija, kas vienmēr atgriezīs tās pašas izejas tām pašām argumentu vērtībām, kas tiek nodotas.

Nobeigumā:

Pagaidām pārāk neuztraucieties par tīro funkciju. Vienkārši paturiet prātā, ka programmā React, deklarējot komponentu, izmantojot rekvizītus, tas nekad nedrīkst mainīt savus norādījumus. Šajā rakstā jūs uzzinājāt par to, kā rekvizīti tiek izmantoti datu nodošanai komponentiem. Jūs atklājāt, ka rekvizīts ir īpašs reakcijas objekts, kas darbojas līdzīgi JavaScript objektam un ka tā īpašībām var piekļūt, izmantojot punktu apzīmējumu.

Jūs arī uzzinājāt, kāpēc izstrādātāji izmanto rekvizītus, lai padarītu savas lietotnes dinamiskākas un elastīgākas. Visbeidzot, jūs pārbaudījāt dažus ierobežojumus attiecībā uz rekvizītu izmantošanu, jo nevarat tos izmantot, lai nosūtītu datus atpakaļ uz vecākkomponentu, un funkcijas, kas izmanto rekvizītus, nekad nedrīkst mainīt savus rekvizītus.