ทำไมรายการต้องการ key และทำไมไม่ใช้ index

Question

IT Interview Practice · Accepted Answer

เมื่อคุณ render รายการ React ต้องการวิธีการรู้ว่า **รายการไหนคือรายการไหน** ระหว่าง render เพื่อให้สามารถนำกลับมาใช้ เรียงลำดับใหม่ แทรก หรือลบโหนด DOM ได้อย่างถูกต้อง **`key`** คือ identity นั้น ```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 นำ `` ที่ผิด กลับมาใช้ (และ value/focus ภายใน) ## กฎ - ใช้ **stable, unique** id จากข้อมูลของคุณ (`user.id` slug) - Index ยอมรับได้ **เพียง** สำหรับรายการแบบ static ที่ไม่เคยเรียงลำดับใหม่ แทรก หรือลบ - Keys ต้องไม่ซ้ำกัน **ในหมู่พี่น้อง** (ไม่ใช่ทั่วโลก) Keys เป็นคำแนะนำให้อัลกอริทึม reconciliation สามารถได้มาซึ่งการทำให้ถูกต้องเก็บรักษาทั้งประสิทธิภาพและสถานะ component ไว้อย่างถูกต้อง

ทำไม array index จึงเสี่ยง

กฎ

คำถามที่เกี่ยวข้อง