Frontend developer müsahibələrində çox vaxt React komponentlərinin siyahısını necə render etmək lazım olduğu sual olunur. JavaScript-in map() və filter() metodları vasitəsilə data array-lərdən effektiv şəkildə komponentlər yaratmaq frontend developer üçün vacib bacarıqlardandır.
Çox vaxt bir data collection-dan bir neçə oxşar komponenti göstərmək istəyəcəksiniz. Bir array of data-nı dəyişmək üçün JavaScript array metodlarından istifadə edə bilərsiniz. Bu səhifədə, React ilə filter() və map() istifadə edərək array of data-nı filterdən keçirmək və transformasiya edərək onu array of components-ə çevirməyi öyrənəcəksiniz.
React Rendering Lists bloqunda öyrənəcəklərimiz:
- - JavaScript-in map() metodu ilə array-dən komponentlərin necə render ediləcəyini
- - JavaScript-in filter() metodu ilə yalnız spesifik komponentlərin necə render ediləcəyini
- - React keys-dən nə vaxt və niyə istifadə etməli olduğunuzu
Array-lardan məlumatın render edilməsi
React-də, eyni komponentin müxtəlif data ilə birdən çox nümunəsini yaratmaq üçün array-lardan istifadə edilir. Bu metod saytların hazırlanması zamanı veb sayt yaratmaq prosesini asanlaşdırır və useState kimi hooklarla data idarəsini təmin edir.
Sizin bir content siyahınız olduğunu düşünək.
<ul>
<li>Creola Katherine Johnson: mathematician</li>
<li>Mario José Molina-Pasquel Henríquez: chemist</li>
<li>Mohammad Abdus Salam: physicist</li>
<li>Percy Lavon Julian: chemist</li>
<li>Subrahmanyan Chandrasekhar: astrophysicist</li>
</ul>
Bu siyahı elementləri arasında olan yeganə fərq onların content-i, yəni data-sıdır. İnterfeyslər qurarkən, çox vaxt eyni component-in müxtəlif data ilə bir neçə nümunəsini göstərməyə ehtiyacınız olacaq: şərhlər siyahısından tutmuş profil şəkilləri qalereyalarına qədər. Belə hallarda, həmin data-nı JavaScript object və array-larında saxlaya və onlardan component siyahılarını render etmək üçün map() və filter() kimi method-lardan istifadə edə bilərsiniz.
Burada array-dan elementlərin siyahısını yaratmağın qısa bir nümunəsi verilib:
1. Məlumatı bir array-ə köçürün:
const people = [
'Creola Katherine Johnson: mathematician',
'Mario José Molina-Pasquel Henríquez: chemist',
'Mohammad Abdus Salam: physicist',
'Percy Lavon Julian: chemist',
'Subrahmanyan Chandrasekhar: astrophysicist'
];
2. people üzvlərini yeni bir JSX node-lar array-i olan listItems-ə map edin:
const listItems = people.map(person => <li>{person}</li>);
3. Component-dən listItems-i <ul> daxilində return edin:
return <ul>{listItems}</ul>;
Nəticə belə olacaq:
const people = [
'Creola Katherine Johnson: mathematician',
'Mario José Molina-Pasquel Henríquez: chemist',
'Mohammad Abdus Salam: physicist',
'Percy Lavon Julian: chemist',
'Subrahmanyan Chandrasekhar: astrophysicist'
];export default function List() {
const listItems = people.map(person =>
<li>{person}</li>
);
return <ul>{listItems}</ul>;
}
Console açsaq aşağıdakı kimi bir xəta mesajı ilə qarşılaşacağıq:
Each child in a list should have a unique "key" prop.
Check the render method of `List`. See https://react.dev/link/warning-keys for more information.
Bu səhifədə sonrakı hissədə bu xətanı necə düzəltməyi öyrənəcəksiniz. Buna keçməzdən əvvəl gəlin data-nıza bir az struktur əlavə edək.
Elementlərdən ibarət array-lərın filter edilməsi
Frontend developer vakansiyalarında array metodlarını bilmək və spesifik məlumatları filterləmək çox önəmlidir. Filter() metodu ilə müəyyən kriteriyalara uyğun komponentlər göstərmək saytların hazırlanması zamanı optimallaşdırma üçün geniş istifadə olunur.
Bu data daha da strukturlaşdırıla bilər.
const people = [{
id: 0,
name: 'Creola Katherine Johnson',
profession: 'mathematician',
}, {
id: 1,
name: 'Mario José Molina-Pasquel Henríquez',
profession: 'chemist',
}, {
id: 2,
name: 'Mohammad Abdus Salam',
profession: 'physicist',
}, {
id: 3,
name: 'Percy Lavon Julian',
profession: 'chemist',
}, {
id: 4,
name: 'Subrahmanyan Chandrasekhar',
profession: 'astrophysicist',
}];
Tutaq ki, yalnız profession-u 'chemist' olan insanları göstərmək istəyirsiniz. Yalnız həmin insanları qaytarmaq üçün JavaScript-in filter() metodundan istifadə edə bilərsiniz. Bu metod elementlərdən ibarət bir array qəbul edir, onları “test”dən (true və ya false qaytaran bir funksiya) keçirir və yalnız testi keçən (true qaytaran) elementlərdən ibarət yeni bir array qaytarır. Siz yalnız profession-u 'chemist' olan elementləri istəyirsiniz. Bu məqsəd üçün “test” funksiyası belə görünür: (person) => person.profession === 'chemist'. Bunu bir yerə necə toplamaq lazım olduğunu aşağıda görürsünüz:
Siz yalnız profession-u 'chemist' olan elementləri istəyirsiniz. Bunun üçün “test” funksiyası belə görünür: (person) => person.profession === 'chemist'. Bunu bir yerə necə toplamaq lazım olduğunu aşağıda görəcəksiniz:
person.profession === 'chemist' şərti ilə people üzərində filter() çağıraraq yalnız “chemist” olan insanlardan ibarət yeni bir array, chemists yaradın:
const chemists = people.filter(person =>
person.profession === 'chemist'
);
İndi chemists üzərində map metodunu tətbiq edin:
const listItems = chemists.map(person =>
<li>
<img
src={getImageUrl(person)}
alt={person.name}
/>
<p>
<b>{person.name}:</b>
{' ' + person.profession + ' '}
known for {person.accomplishment}
</p>
</li>
);
Sonda komponentinizdən listItems-i qaytarın:
return <ul>{listItems}</ul>;
import { people } from './data.js';
import { getImageUrl } from './utils.js';export default function List() {
const chemists = people.filter(person =>
person.profession === 'chemist'
);
const listItems = chemists.map(person =>
<li>
<img
src={getImageUrl(person)}
alt={person.name}
/>
<p>
<b>{person.name}:</b>
{' ' + person.profession + ' '}
known for {person.accomplishment}
</p>
</li>
);
return <ul>{listItems}</ul>;
}
Qeyd
Arrow function-lar =>-dən dərhal sonra gələn ifadəni örtülü şəkildə (implicitly) qaytarır, buna görə də return ifadəsinə ehtiyac yoxdur:
const listItems = chemists.map(person =>
<li>...</li> // Örtülü return!
);
Lakin əgər =>-dən sonra { curly brace gəlirsə, return-u açıq şəkildə (explicitly) yazmalısınız!
const listItems = chemists.map(person => { // Curly brace
return <li>...</li>;
});
=> { ilə yazılmış arrow function-lar “block body” adlanır. Onlar sizə bir neçə sətrdən ibarət kod yazmağa imkan verir, lakin return ifadəsini özünüz yazmalısınız. Əgər onu unutmusunuzsa, heç nə qaytarılmayacaq!
key istifadə edərək siyahı elementlərini ardıcıllıqla saxlamaq
React-də listlərdə key atributu komponentlərin performanslı render olunması və DOM yenilənməsi üçün çox vacibdir. Müsahibələrdə key-in əhəmiyyəti və düzgün təyin olunması barədə suallar tez-tez verilir.
Yuxarıdakı bütün sandbox-larda konsolda bir səhv göründüyünü qeyd etməliyik:
Console
Warning: Each child in a list should have a unique “key” prop.
Hər bir array elementinə unikal “key” — yəni həmin array-dəki digər elementlərdən fərqləndirən string və ya rəqəm — verməlisiniz:
<li key={person.id}>...</li>
Qeyd:
JSX elementləri map() istifadəsi zamanı həmişə açarlara(key) ehtiyac duyur!
Keys React-ə bildirir ki, hər bir komponent array-də hansı elementə uyğun gəlir, beləliklə sonradan onları düzgün şəkildə uyğunlaşdıra bilər. Bu, array elementləriniz hərəkət edə bilərsə (məsələn, çeşidləmə səbəbindən), əlavə edilə bilər və ya silinə bilərsə vacib olur. Yaxşı seçilmiş key React-ə dəqiq nə baş verdiyini anlamağa kömək edir və DOM ağacına düzgün yeniləmələr etməyə imkan verir.
import { people } from './data.js';
import { getImageUrl } from './utils.js';export default function List() {
const listItems = people.map(person =>
<li key={person.id}>
<img
src={getImageUrl(person)}
alt={person.name}
/>
<p>
<b>{person.name}</b>
{' ' + person.profession + ' '}
known for {person.accomplishment}
</p>
</li>
);
return <ul>{listItems}</ul>;
}
Key-i necə təyin etmək olar?
Müxtəlif məlumat mənbələri müxtəlif key mənbələri təmin edir:
Data from a database: Əgər məlumatlarınız verilənlər bazasından gəlirsə, təbii olaraq unikal olan verilənlər bazasının key/lərin ID-lərindən istifadə edə bilərsiniz.
Locally generated data: Əgər məlumatlarınız yerli olaraq yaradılıb saxlanılırsa (məsələn, qeydlər qeyd aparan tətbiqdə), elementləri yaradarkən artırılan sayğac, crypto.randomUUID() və ya uuid kimi bir paketdən istifadə edin.
Rules of keys - istifadə qaydaları
Key-lər sibling elementlər arasında unikal olmalıdır. Lakin fərqli array-lərdəki JSX nodes üçün eyni key-lərdən istifadə etmək problem deyil.
Key-lər dəyişməməlidir, əks halda məqsədinə çatmazlar! Onları rendering zamanı yaratmayın.
Müsahibə suallarında key-lərin düzgün istifadəsi barədə biliklərinizi göstərmək frontend developer vakansiyaları üçün böyük üstünlükdür.
React niyə keys-ə ehtiyac duyur?
Təsəvvür edin ki, masaüstünüzdəki faylların adları yoxdur. Onların yerinə onları sıraya görə çağırırsınız — birinci fayl, ikinci fayl və s. Bu vərdişə öyrəşə bilərsiniz, amma bir faylı sildiyiniz zaman qarışıqlıq yaranar. İkinci fayl birinci fayla, üçüncü fayl ikinci fayla çevrilər və s.
Qovluqdakı fayl adları və array-dəki JSX key-ləri oxşar məqsədə xidmət edir. Onlar bizə elementləri siblings arasında unikal şəkildə müəyyən etməyə imkan verir. Yaxşı seçilmiş key array-dəki mövqedən daha çox məlumat verir. Mövqe dəyişsə belə, key React.js-ə elementin ömrü boyunca onu tanımağa kömək edir. Bu, xüsusilə vebsayt hazırlanması zamanı komponentlərin səmərəli idarə olunmasında önəmlidir.
İndeks və Random Key-dən İstifadə Etməmək
Elementin array-dəki indeksini key kimi istifadə etməyə meylli ola bilərsiniz. React isə, əgər key verməsəniz, bunu özü avtomatik olaraq indekslə edir. Amma problem ondadır ki, siyahıya element əlavə etdikdə, sildikdə və ya sıralama dəyişdikdə, indekslər dəyişir və React elementlərin düzgün təkrar istifadə edilməsində çaşqınlıq yaşayır. Bu, səhvlərə və gözlənilməz davranışa səbəb ola bilər.
Eyni zamanda, key={Math.random()} kimi hər dəfə fərqli və ya təsadüfi key yaratmaq da düzgün deyil. Çünki belə olan halda React hər renderdə bütün elementləri yeni hesab edir və tam yenidən yaradır. Bu həm performansa pis təsir edir, həm də məsələn, istifadəçi tərəfindən daxil edilmiş məlumatların itirilməsinə səbəb ola bilər.
Daha düzgün üsul isə, siyahınızdakı elementlərin məlumatlarından gələn, dəyişməyən, sabit və unikal id və ya açar istifadə etməkdir.
Nəzərə alın ki, key sadəcə React-in özünün elementləri izləməsi üçün istifadə olunur və komponentə prop kimi ötürülmür. Əgər komponentin özü bu id-yə ehtiyac duyursa, onu ayrıca prop kimi göndərmək lazımdır. Məsələn:
<Profile key={id} userId={id} />
Nəticə
React ilə işləyən hər bir frontend developer üçün JavaScript-in array metodlarını effektiv istifadə etmək və React komponentlərini düzgün render etmək əsas bacarıqlardandır. Bu prosesdə key atributunun düzgün təyini performans və komponentlərin stabil işləməsi üçün vacibdir. Frontend developer vakansiyalarında və javascript interview suallarında bu mövzular tez-tez ön plana çıxır. Veb saytların hazırlanması zamanı React komponentləri ilə çalışmaq, useState hook və digər əsas React anlayışlarını yaxşı mənimsəmək, həmçinin array metodları və key-lərin düzgün istifadəsi frontend developer kimi uğurlu karyera üçün önəmlidir.
