ਸੂਚੀ ਦੀਆਂ ਚੀਜ਼ਾਂ ਨੂੰ ਕੁੰਜੀ ਦੀ ਲੋੜ ਕਿਉਂ ਹੈ, ਅਤੇ ਸੂਚਕਾਂਕ ਦੀ ਵਰਤੋਂ ਕਿਉਂ ਨਹੀਂ ਕਰਦੇ?

Question

IT Interview Practice · Accepted Answer

ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਸੂਚੀ ਪ੍ਰਸਤੁਤ ਕਰਦੇ ਹੋ, React ਨੂੰ ਇੱਕ ਤਰੀਕੇ ਦੀ ਲੋੜ ਹੈ ਤਾਂ ਜੋ ਇਹ ਜਾਣ ਸਕੇ **ਕਿ ਕਿਹੜੀ ਚੀਜ਼ ਕਿਹੜੀ ਹੈ** ਰੈਂਡਰਿੰਗ ਦੇ ਵਿਚਕਾਰ ਤਾਂ ਜੋ ਇਹ DOM ਨੋਡਸ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਮੁੜ ਵਰਤ, ਮੁੜ ਆਰਡਰ, ਸ਼ਾਮਲ ਜਾਂ ਮਿਟਾ ਸਕੇ। **`key`** ਉਹ ਪਛਾਣ ਹੈ। ```jsx {users.map(user => ( // stable, unique id ))} ``` ## ਐਰੇ ਇੰਡੈਕਸ ਕਿਉਂ ਜੋਖਮਭਰਾ ਹੈ ਸੂਚਕਾਂਕ ਨੂੰ ਕੁੰਜੀ ਵਜੋਂ ਵਰਤਣਾ 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. ``` ਇੱਕ ਅਸਲ ਲੱਛਣ: ਇਨਪੁਟ ਦੀ ਸੂਚੀ ਜਿੱਥੇ ਇੱਕ ਕਤਾਰ ਵਿੱਚ ਟਾਈਪ ਕਰਨਾ ਮਿਟਾਉਣ/ਛਾਂਟਣ ਤੋਂ ਬਾਅਦ ਦੂਸਰੀ ਕਤਾਰ ਵਿੱਚ "ਚਲੇ" ਜਾਂਦਾ ਹੈ, ਕਿਉਂਕਿ React ਨੇ ਗਲਤ `` ਨੂੰ ਮੁੜ ਵਰਤਿਆ (ਅਤੇ ਇਸ ਦੀ ਅੰਦਰੂਨੀ ਮਾਣ/ਫੋਕਸ)। ## ਨਿਯਮ - ਆਪਣੇ ਡਾਟਾ ਤੋਂ **ਸਥਿਰ, ਅਨੌਖੀ** id ਦੀ ਵਰਤੋਂ ਕਰੋ (`user.id`, ਇੱਕ slug)। - ਸੂਚਕਾਂਕ **ਸਿਰਫ** ਇੱਕ ਸਥਿਰ ਸੂਚੀ ਲਈ ਸਵੀਕਾਰ ਯੋਗ ਹੈ ਜੋ ਕਦੇ ਮੁੜ ਆਰਡਰ, ਸ਼ਾਮਲ ਜਾਂ ਮਿਟਾਵੇ ਨਹੀਂ। - ਕੁੰਜੀਆਂ **ਭਾਈਵਾਲਾਂ** ਵਿਚਕਾਰ ਅਨੌਖੀ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ (ਵਿਸ਼ਵ-ਵਿਆਪੀ ਨਹੀਂ)। ਕੁੰਜੀਆਂ reconciliation ਐਲਗੋਰਿਦਮ ਲਈ ਇੱਕ ਸੰਕੇਤ ਹਨ; ਉਹਨਾਂ ਨੂੰ ਸਹੀ ਪ੍ਰਾਪਤ ਕਰਨਾ ਪ੍ਰਦਰਸ਼ਨ ਅਤੇ ਭਾਗ ਦੀ ਸਥਿਤੀ ਦੋਵਾਂ ਨੂੰ ਸਹੀ ਰੱਖਦਾ ਹੈ।

ਐਰੇ ਇੰਡੈਕਸ ਕਿਉਂ ਜੋਖਮਭਰਾ ਹੈ

ਨਿਯਮ

ਸੰਬੰਧਿਤ ਸਵਾਲ