Ինչպե՞ս եք դասավորում բանալիները ցանկերում React-ի հետ աշխատելիս։

React-ում բանալիները օգտագործվում են տարրերի նույնականացման համար ցուցակներում նրանց արտապատկերելիս: Սա օգնում է React-ին արդյունավետորեն թարմացնել UI-ն՝ որոշելով, թե որ տարրերն են փոխվել, ավելացել կամ հեռացվել:

Բանալիք տեղադրման հիմնական սկզբունքները՝

• Անհատականություն: Յուրաքանչյուր բանալի պետք է լինի յուրահատուկ իր հարևան տարրերի միջև մեկ ցուցակում:
• Տևականություն: Բանալիքը պետք է մնում կայուն նույն տարրի համար ամբողջ կոմպոնենտի կյանքի ընթացքում, նույնիսկ կրկնակի արտապատկերելիս:

Լավագույն բանալիք տեղադրման մեթոդներ՝

1. Տվյալների յուրահատուկ նույնականացուցիչի օգտագործում: Եթե ձեր տվյալները ունեն կայուն և յուրահատուկ ID (օրինակ, id տվյալների բազայից), օգտագործեք այն որպես բանալի:

   // Ենթադրենք, որ ունեք օբյեկտների զանգված՝ յուրահատուկ id-ով
   const items = [
     { id: 1, name: 'Item 1' },
     { id: 2, name: 'Item 2' },
     { id: 3, name: 'Item 3' },
   ];
   
   function ItemList({ items }) {
     return (
       <ul>
         {items.map(item => (
           <li key={item.id}>{item.name}</li>
         ))}
       </ul>
     );
   }
   

   Սա ամենալավ մեթոդն է, քանի որ ապահովում է կայունություն ցանկացած փոփոխության դեպքում՝ վերադասավորում, ավելացում կամ հեռացում:

2. Տողի ինդեքսի օգտագործում (ուշադրություն դարձրեք): Միայն շատ հատուկ դեպքերում, երբ՝

   • Ցուցակը ստատիկ է և երբեք չի փոխվում:
   • Տվյալների տարրերը երբեք չեն վերադասավորվում, ավելացվում կամ հեռացվում:
   • Ցուցակը չի ֆիլտրացվում:

   // Միայն եթե items-ը երաշխավորված է, որ երբեք չի փոխվի
   const items = ['Item 1', 'Item 2', 'Item 3'];
   
   function StaticItemList() {
     return (
       <ul>
         {items.map((item, index) => (
           <li key={index}>{item}</li>
         ))}
       </ul>
     );
   }
   

   Маълум: Իդենտիֆիկատորի օգտագործումը որպես բանալի անկայուն ցուցակներում կարող է հանգեցնել UI-ի սխալ վարքագծի, տարրերի վիճակի կորուստի (օրինակ՝ տեքստի մուտքագրում input-ում) կամ անարդյունավետ արտապատկերման:

3. Բանալի գեներացում տվյալների համակցման հիման վրա: Եթե տվյալները չունեն յուրահատուկ ID, կարող եք ստեղծել կոմպոզիտային բանալի՝ հիմնվելով մի քանի կայուն հատկությունների վրա:

   // Օրինակ՝ անունը և ամսաթիվը համակցելը
   const events = [
     { name: 'Party', date: '2023-10-26' },
     { name: 'Meeting', date: '2023-10-27' },
   ];
   
   function EventList({ events }) {
     return (
       <ul>
         {events.map(event => (
           <li key={`${event.name}-${event.date}`}>{`${event.name} - ${event.date}`}</li>
         ))}
       </ul>
     );
   }
   

Ամփոփում՝ ամենալավ և անվտանգ մեթոդը միշտ օգտագործել տվյալների յուրահատուկ և կայուն նույնականացուցիչը:

Իդենտիֆիկատորի օգտագործումը շատ հազվադեպ է արդարացված և միայն ստատիկ ցուցակների համար։