რატომ სჭირდება სიის ელემენტებს key, და რატომ არ გამოვიყენოთ index?

Question

IT Interview Practice · Accepted Answer

სიის რენდერირებისას React-ს სჭირდება გაიცნობოს **რომელი ელემენტი რომელია** რენდერებებს შორის, რათა სწორად დააბრუნოს, გადააწყოს, ჩამოიტანოს ან წაშალოს DOM ხელმისაწვდომი. **`key`** არის ეს იდენტობა. ```jsx {users.map(user => ( // stable, unique id ))} ``` ## რატომ არის array index რისკიანი index-ის გამოყენება key-ის სახით React-ს ეუბნება "პოზიციაზე 0 მყოფი ელემენტი იგივე ელემენტია, რაც ადრე" — რაც მყისვე წყდება, როგორც კი სია გადაწყდება, ან თქვენ ჩამოიტანთ/წაშლით წინ: ```jsx // items: [A, B, C] with keys 0,1,2 // you DELETE A → [B, C], keys become 0,1 // React thinks key 0 (was A) is now B, key 1 (was B) is now C... // so it keeps the wrong DOM state with the wrong item. ``` რეალური სიმპტომი: input-ების სია, სადაც ერთ ხაზში აკრეფა სხვა ხაზში "ხტება" წაშლის/დახარისხების შემდეგ, რადგან React ხელმისაწვდომი გამოიყენა არასწორი `` (და მის შიგნით არსებული მნიშვნელობა/focus). ## წესები - გამოიყენეთ **სტაბილური, უნიკალური** id თქვენი მონაცემებიდან (`user.id`, slug). - index მისაღებია **მხოლოდ** სტატიკური სიაზე, რომელიც არასდროს გადაწყდება, ჩამოტანის ან წაშლის. - Keys უნდა იყოს უნიკალური **ძმებს** შორის (არა გლობალურად). Keys არის მინიშვნება შემტეხი ალგორითმისთვის; მათი სწორი დაყენება ინარჩუნებს როგორც სიმძლავრეს, ასევე კომპონენტის state-ს სწორს.

რატომ არის array index რისკიანი

წესები

დაკავშირებული კითხვები