React.js Props Idarəetməsi

React komponentləri bir-biri ilə ünsiyyət qurmaq üçün props-lardan istifadə edir. Hər bir parent component child components-ə müəyyən məlumat ötürə bilər, bunu onlara props verərək edir. Props sizə HTML atributlarını xatırlada bilər, amma onların vasitəsilə obyektlər, massivlər və funksiyalar da daxil olmaqla istənilən JavaScript dəyərini ötürmək mümkündür.

Biz React.js Props İdarəetməsi bloqunda öyrənəcəyik:
— Bir komponentə props necə ötürülür
— Bir komponentdə props necə oxunur
— Props üçün ilkin dəyərlər necə təyin olunur
— Bir komponentə müəyyən JSX necə ötürülür
— Props zamanla necə dəyişir

Props — JSX tag’ına ötürdüyünüz məlumatlardır. Məsələn, className, src, alt, width və height — bunlar <img> tag’ına ötürə biləcəyiniz props-lardan bəziləridir:

function Avatar() {
return (
<img
className="avatar"
src="https://i.imgur.com/1bX5QH6.jpg"
alt="Lin Lanying"
width={100}
height={100}
/>
);
}
export default function Profile() {
return (
<Avatar />
);
}

<img> tag’ına ötürə biləcəyiniz props əvvəlcədən təyin olunub (ReactDOM HTML standartına uyğundur). Amma siz öz komponentlərinizə, məsələn <Avatar> kimi, istənilən props ötürə bilərsiniz ki, onları fərdiləşdirəsiniz.

Bir komponentə props ötürmək

Bu kodda, Profile komponenti öz child component-i olan Avatar-a heç bir props ötürmür:

export default function Profile() {
return (
<Avatar />
);
}

Siz Avatar-a bəzi props iki addımda verə bilərsiniz.

Addım 1: Props-u child komponentə ötürmək

İlk olaraq, Avatar-a bəzi props ötürün. Məsələn, gəlin iki props ötürək: person (obyekt) və size (rəqəm):

export default function Profile() {
return (
<Avatar
person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
size={100}
/>
);
}

Note - Əgər person=-dən sonra gələn ikiqat mötərizələr sizi çaşdırırsa, xatırlayın ki, bunlar sadəcə JSX mötərizələrinin içindəki bir obyektidir.

İndi siz bu props-ları Avatar komponentinin içində oxuya bilərsiniz.

Addım 2: Child komponentin daxilində props-u oxumaq

Bu props-ları function Avatar-dan dərhal sonra mötərizə içində ({ person, size }) yazaraq, adlarını vergüllə ayırmaqla oxuya bilərsiniz. Bu sizə Avatar kodu daxilində onları dəyişən kimi istifadə etməyə imkan verir.

function Avatar({ person, size }) {
// person və size burada əlçatandır
}

Avatar komponentinə person və size propslarından istifadə edən bir az məntiq əlavə edin və iş tamamdır.

İndi Avatar komponentini fərqli propslarla bir çox müxtəlif şəkildə göstərmək üçün konfiqurasiya edə bilərsiniz. Dəyərlərlə oynamağa çalışın!

import { getImageUrl } from './utils.js';
function Avatar({ person, size }) {
return (
<img
className="avatar"
src={getImageUrl(person)}
alt={person.name}
width={size}
height={size}
/>
);
}
export default function Profile() {
return (
<div>
<Avatar
size={100}
person={{
name: 'Katsuko Saruhashi',
imageId: 'YfeOqp2'
}}
/>
<Avatar
size={80}
person={{
name: 'Aklilu Lemma',
imageId: 'OKS67lh'
}}
/>
<Avatar
size={50}
person={{
name: 'Lin Lanying',
imageId: '1bX5QH6'
}}
/>
</div>
);
}
export function getImageUrl(person, size = 's') {
return (
'https://i.imgur.com/' +
person.imageId +
size +
'.jpg'
);
}

utils.js:

export function getImageUrl(person, size = 's') {
return (
'https://i.imgur.com/' +
person.imageId +
size +
'.jpg'
);
}

Props-lar React-də komponentlər arasında məlumat ötürmək üçün istifadə olunur və parent komponentlə child komponentin bir-birindən asılı olmadan işləməsinə imkan yaradır.

Məsələn, siz Profile adlı parent komponentində person və ya size kimi props dəyərlərini dəyişə bilərsiniz. Bu zaman Avatar adlı övlad komponent bu dəyərləri necə istifadə edir — bunu düşünməyə ehtiyac yoxdur. Çünki Profile yalnız Avatara lazım olan məlumatları ötürür, necə istifadə ediləcəyi Avatarın öz işidir.

Eyni şəkildə, əgər siz Avatar komponentinin içində props-ların necə istifadə olunduğunu dəyişsəniz, Profile komponentini dəyişməyə ehtiyac qalmaz. Bu yanaşma komponentlərin bir-birindən müstəqil şəkildə işləməsini və yenidən istifadə oluna bilməsini asanlaşdırır.

Props-ları, sanki bir cihazın “tənzimləyici düymələri” kimi düşünə bilərsiniz. Cihazın içini bilmədən, yalnız düymələri çevirərək onun necə işlədiyini dəyişirsiniz. React-də də props-lar komponentin davranışını və görünüşünü dəyişmək üçün istifadə olunan yeganə vasitədir.

React komponentləri, əslində, bir funksiyadır və bu funksiya yalnız bir arqument qəbul edir — o da props obyektidir. Yəni props-lar funksiyaya verilən parametrlər kimi davranır və komponentin daxilində həmin məlumatlardan istifadə edilir.

function Avatar(props) {
let person = props.person;
let size = props.size;
// ...
}

Adətən bütün props obyektinə ehtiyac olmur, buna görə də onu ayrı-ayrı props-lara destrukturizasiya edirsiniz.

Props elan edilərkən ( ) içindəki { } mötərizələrinin cütünü qaçırmayın:

function Avatar({ person, size }) {
// ...
}

Bu sintaksis “destructuring” (destrukturizasiya) adlanır və funksiyanın parametrindən xüsusiyyətləri oxumağa bərabərdir:

function Avatar(props) {
let person = props.person;
let size = props.size;
// ...
}

Prop üçün standart dəyərin təyin olunması

Əgər bir prop üçün heç bir dəyər verilmədikdə istifadə olunacaq defolt dəyər təyin etmək istəyirsinizsə, bunu destrukturizasiya zamanı parametrdən sonra = və defolt dəyəri qoymaqla edə bilərsiniz:

function Avatar({ person, size = 100 }) {
// ...
}

İndi, əgər <Avatar person={...} /> render olunanda size prop verilməzsə, size avtomatik olaraq 100 olacaq.

Defolt dəyər yalnız size prop-u çatışmadıqda və ya size={undefined} verildikdə istifadə olunur. Amma size={null} və ya size={0} verilsə, defolt dəyər istifadə olunmayacaq.

JSX spread sintaksisi ilə props-ların ötürülməsi

Bəzən props ötürmək çox təkrarlana bilər:

function Profile({ person, size, isSepia, thickBorder }) {
return (
<div className="card">
<Avatar
person={person}
size={size}
isSepia={isSepia}
thickBorder={thickBorder}
/>
</div>
);
}

Təkrarlanan kodda pis heç nə yoxdur — bu, daha oxunaqlı ola bilər. Amma bəzən qısalığa üstünlük verə bilərsiniz. Bəzi komponentlər bütün propslarını öz child komponentlərinə ötürür, məsələn, bu Profile Avatara belə edir. Onlar öz propslarından heç birini birbaşa istifadə etmədiyi üçün, daha qısa “spread” sintaksisini istifadə etmək məntiqli ola bilər:

function Profile(props) {
return (
<div className="card">
<Avatar {...props} />
</div>
);
}

Bu Profile-in bütün propslarını Avatara adlarını ayrıca yazmadan ötürür.

Spread sintaksisini ehtiyatla istifadə edin. Əgər hər ikinci komponentdə bunu istifadə edirsinizsə, bir şey səhvdir. Çox vaxt bu, komponentlərinizi bölmək və child komponentləri JSX kimi ötürmək lazım olduğunu göstərir. Bu haqda növbəti mövzuda daha çox danışacağıq!

Props-ların düzgün idarə olunması və komponentlər arasında məlumatın effektiv ötürülməsi, müasir veb saytların hazırlanması zamanı daha çevik və təkrar istifadə edilə bilən React komponentlərinin yaradılmasına imkan verir.

JSX-i children olaraq ötürmək

Brauzerin daxili teqlərinin iç-içə yerləşdirilməsi adi bir haldır:

<div>
<img />
</div>

Bəzən siz də öz komponentlərinizi eyni şəkildə iç-içə yerləşdirmək istəyəcəksiniz:

<Card>
<Avatar />
</Card>

JSX teqinin içərisinə kontent yerləşdirdiyiniz zaman, parent komponent həmin kontenti children adlı bir prop vasitəsilə alacaq. Məsələn, aşağıdakı Card komponenti children prop-u olaraq <Avatar /> alacaq və onu bir div konteynerinin içində göstərəcək:

function Card({ children }) {
return (
<div className="card">
{children}
</div>
);
}
export default function Profile() {
return (
<Card>
<Avatar
size={100}
person={{
name: 'Katsuko Saruhashi',
imageId: 'YfeOqp2'
}}
/>
</Card>
);
}

import { getImageUrl } from './utils.js';
export default function Avatar({ person, size }) {
return (
<img
className="avatar"
src={getImageUrl(person)}
alt={person.name}
width={size}
height={size}
/>
);
}
export function getImageUrl(person, size = 's') {
return (
'https://i.imgur.com/' +
person.imageId +
size +
'.jpg'
);
}

<Card> içərisindəki <Avatar> elementini bir mətnlə əvəzləməyə çalışın ki, Card komponentinin istənilən iç-içə kontenti necə əhatə edə bildiyini görün. Onun içində nə göstəriləcəyini “bilməsinə” ehtiyac yoxdur. Bu elastik nümunəni bir çox yerdə görəcəksiniz.

children prop-u olan komponenti, sanki “doldurula bilən bir boşluq” kimi düşünə bilərsiniz və parent komponentlər bu boşluğu istədikləri JSX ilə “doldura” bilərlər. children prop-u vizual konteynerlərdə — panellər, grid-lər və s. kimi — tez-tez istifadə olunacaq.

Props-ların zamanla necə dəyişdiyini anlamaq

Aşağıdakı Clock komponenti parent komponentindən iki prop qəbul edir: color və time. (parent komponentin kodu buraya daxil edilməyib, çünki o state istifadə edir və biz hələlik bu mövzuya toxunmuruq.)

Aşağıdakı seçim qutusunda color dəyərini dəyişməyə cəhd edin:

export default function Clock({ color, time }) {
return (
<h1 style={{ color: color }}>
{time}
</h1>
);
}

Bu nümunə göstərir ki, komponent zaman keçdikcə müxtəlif props ala bilər. Props-lar hər zaman statik olmur! Burada time prop-u hər saniyə dəyişir və color prop-u isə siz başqa rəng seçəndə dəyişir. Props-lar bir komponentin məlumatlarını yalnız başlanğıcda deyil, istənilən anda əks etdirir.

Lakin, props-lar dəyişməzdir (immutable) — bu, informatika sahəsində “dəyişdirilə bilməz”(unchangeable) deməkdir. Komponentin öz props-larını dəyişdirməsi lazım gəldikdə (məsələn, istifadəçi ilə qarşılıqlı əlaqəyə və ya yeni məlumatlara cavab olaraq), o, parent komponentdən ona fərqli props — yeni bir obyekt! — göndərməsini “xahiş etməlidir”. Köhnə props-lar isə sonra kənara atılır və nəhayət, JavaScript engine onların tutduğu yaddaşı geri alır.

Props-ları “dəyişməyə” çalışmayın. İstifadəçi girişinə cavab vermək lazım gəldikdə (məsələn, seçilmiş rəngi dəyişmək kimi), “state təyin etməlisiniz”, bu barədə State: A Component’s Memory bölməsində öyrənəcəksiniz.

Nəticə

Bu bloqda React-də props-ların istifadəsi geniş şəkildə izah olunur. Siz props-un:

- komponentlərə necə ötürüldüyünü,
- destructuring və default dəyərlərlə necə istifadə edildiyini,
- spread operatoru ilə necə paylaşıldığını,
- və children vasitəsilə komponentlər arasında məzmunun necə ötürüldüyünü öyrəndiniz.

Props-lar React tətbiqlərində komponentləri daha çevik və təkrar istifadə oluna bilən hala gətirmək üçün əsas vasitələrdən biridir. Bu biliklər sizə daha təmiz və modulyar kod yazmağa kömək edəcək.

Frontend Müsahibə Sualları

Props nədir və komponentlər arasında necə ötürülür?

Props (yəni "properties") React-də komponentlərə məlumat ötürmək üçün istifadə olunur. Props valideyn (parent) komponentdən uşaq (child) komponentə ötürülür və dəyişdirilə bilməz (read-only-dır). Props-lar komponentə atribut kimi ötürülür:

<ChildComponent name="Ali" age={25} />

Child komponentdə isə belə istifadə olunur:

function ChildComponent(props) {
return <p>Ad: {props.name}, Yaş: {props.age}</p>;
}

Props üçün default (standart) dəyəri necə təyin etmək olar?

Əgər bir prop parent komponent tərəfindən ötürülməyibsə, onun üçün standart (default) dəyər təyin etmək mümkündür. Bu, ya defaultProps vasitəsilə, ya da ES6 destrukturasiyası ilə komponent daxilində edilir:

function Greeting({ name = "Qonaq" }) {
return <p>Salam, {name}!</p>;
}

Variant 2 (köhnə üsul):

Greeting.defaultProps = {
name: "Qonaq"
};

Props ilə state arasındakı fərq nədir?

Props: komponentlərə kənardan ötürülən və dəyişdirilə bilməyən məlumatlardır. Onlar komponentin davranışını idarə etmək və məlumat ötürmək üçün istifadə olunur.

State: komponentin daxilində saxlanan və zamanla dəyişə bilən məlumatdır. Məsələn, istifadəçi hərəkətləri və ya API-dən gələn nəticələr state-də saxlanıla bilər.