Sveltejs Academy · पाठ

नेस्टेड {#each} और Key-आधारित अपडेट

नेस्टेड सूचियों को संभालें और key-आधारित each ब्लॉक से कुशल DOM अपडेट सुनिश्चित करें।

पाठ 4, कुल 4 में से13 चरण

नेस्टेड {#each} और Key-आधारित अपडेट, CoddyKit पर Sveltejs Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Sveltejs Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Sveltejs Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

दो आयाम

टेबल, ग्रिड या ट्री रेंडर करने के लिए {#each} ब्लॉक को नेस्ट करें।

{#each rows as row, i}
  <tr>
    {#each row as cell, j}
      <td>{cell}</td>
    {/each}
  </tr>
{/each}

हर स्तर पर कुंजियाँ

दक्ष अपडेट के लिए हर स्तर पर कुंजियाँ जोड़ें।

{#each rows as row (row.id)}
  {#each row.cells as cell (cell.id)}
    ...
  {/each}
{/each}

ट्री संरचनाएँ

ट्री जैसे डेटा के लिए पुनरावृत्ति-अनुकूल कंपोनेंट या each ब्लॉक का उपयोग करें।

इंडेक्स कुंजियों से बचें

ऐरे के इंडेक्स को कुंजी के रूप में उपयोग करना तब विफल हो जाता है जब आइटम बीच में जोड़े या हटाए जाते हैं। स्थिर id को प्राथमिकता दें।

बदलने योग्य डेटा का जाल

बाहरी संदर्भ को फिर से असाइन किए बिना नेस्ट किए गए ऐरे बदलने से प्रतिक्रियाशीलता टूट जाती है। शीर्ष स्तर पर फिर से असाइन करें।

rows = rows.map(r => r.id === id ? {...r, name} : r);

फ़िल्टर करना और क्रमबद्ध करना

फ़िल्टर या क्रमबद्ध करते समय हमेशा नया ऐरे लौटाएँ; उसी ऐरे को बदलने से अपडेट सक्रिय नहीं होंगे।

sorted = [...items].sort();

प्रदर्शन

कुंजियाँ आइटम जोड़ने, हटाने या स्थानांतरित करने को O(n) बनाती हैं, इसलिए पूरी सूची को फिर से रेंडर करने की आवश्यकता नहीं पड़ती।

सूचियों का क्रम बदलना

कुंजियों के साथ क्रम बदलने वाले एनिमेशन आसान होते हैं: animate:flip के साथ मिलाएँ।

अंदर सशर्त रेंडरिंग

कौन से आइटम दिखें, इस पर बारीक नियंत्रण के लिए each के अंदर {#if} ब्लॉक मिलाएँ।

हर आइटम के लिए कंपोनेंट

जटिल आइटम के लिए चाइल्ड कंपोनेंट रेंडर करें, ताकि लूप का मुख्य भाग छोटा रहे।

{#each todos as todo (todo.id)}
  <Todo {todo} />
{/each}

पृष्ठांकन का तरीका

लंबी सूचियों के लिए हज़ारों नोड रेंडर करने के बजाय पृष्ठांकन करें या वर्चुअलाइज़ेशन का उपयोग करें।

त्वरित जाँच

कुंजियों के लिए इंडेक्स की जगह स्थिर ID को प्राथमिकता क्यों दें?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

द्वि-आयामी डेटा के लिए each ब्लॉक को नेस्ट करें, हर स्तर पर स्थिर ID से कुंजी बनाएँ और अपडेट सक्रिय करने के लिए संग्रहों को हमेशा फिर से असाइन करें।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 41
पाठ: 163

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “नेस्टेड {#each} और Key-आधारित अपडेट” पाठ निःशुल्क है?

हाँ—“नेस्टेड {#each} और Key-आधारित अपडेट” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Sveltejs Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Sveltejs Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“नेस्टेड {#each} और Key-आधारित अपडेट” में मैं क्या सीखूँगा?

नेस्टेड सूचियों को संभालें और key-आधारित each ब्लॉक से कुशल DOM अपडेट सुनिश्चित करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Sveltejs Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Sveltejs Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Sveltejs Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“नेस्टेड {#each} और Key-आधारित अपडेट” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Sveltejs Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Sveltejs Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Sveltejs Academy पर वापस जाएँ