செயல்திறனைத் திறத்தல்: பட்டியல் மேம்படுத்தலுக்கான ரியாக்ட் ரீகன்சிலியேஷன் கீஸ் பற்றிய ஆழமான பார்வை

நவீன வலை உருவாக்க உலகில், தரவு மாற்றங்களுக்கு விரைவாகப் பதிலளிக்கும் ஆற்றல்மிக்க பயனர் இடைமுகங்களை உருவாக்குவது மிக முக்கியம். ரியாக்ட், அதன் காம்போனென்ட் அடிப்படையிலான கட்டமைப்பு மற்றும் டிஸ்க்லரேடிவ் தன்மையுடன், இந்த இடைமுகங்களை உருவாக்குவதற்கான உலகளாவிய தரநிலையாக மாறியுள்ளது. ரியாக்ட்டின் செயல்திறனின் மையத்தில் ரீகன்சிலியேஷன் எனப்படும் ஒரு செயல்முறை உள்ளது, இது விர்ச்சுவல் DOM-ஐ உள்ளடக்கியது. இருப்பினும், மிகவும் சக்திவாய்ந்த கருவிகள் கூட திறமையற்ற முறையில் பயன்படுத்தப்படலாம், மேலும் புதிய மற்றும் அனுபவம் வாய்ந்த டெவலப்பர்கள் இருவரும் தடுமாறும் ஒரு பொதுவான பகுதி பட்டியல்களை ரெண்டரிங் செய்வதாகும்.

நீங்கள் பலமுறை data.map(item => <div>{item.name}</div>) போன்ற குறியீட்டை எழுதியிருப்பீர்கள். இது எளிமையானதாக, அற்பமானதாகத் தெரிகிறது. ஆயினும்கூட, இந்த எளிமையின் கீழ் ஒரு முக்கியமான செயல்திறன் கருத்தில் கொள்ள வேண்டியுள்ளது, இது புறக்கணிக்கப்பட்டால், மந்தமான பயன்பாடுகள் மற்றும் குழப்பமான பிழைகளுக்கு வழிவகுக்கும். தீர்வு? ஒரு சிறிய ஆனால் சக்திவாய்ந்த ப்ராப்: key.

இந்த விரிவான வழிகாட்டி, ரியாக்ட்டின் ரீகன்சிலியேஷன் செயல்முறை மற்றும் பட்டியல் ரெண்டரிங்கில் கீஸ்களின் இன்றியமையாத பங்கு பற்றி உங்களை ஆழமாக அழைத்துச் செல்லும். நாம் 'என்ன' என்பதை மட்டுமல்ல, 'ஏன்' என்பதையும் ஆராய்வோம்—கீஸ் ஏன் அவசியம், அவற்றை எவ்வாறு சரியாகத் தேர்ந்தெடுப்பது, மற்றும் அவற்றை தவறாகப் பயன்படுத்துவதன் குறிப்பிடத்தக்க விளைவுகள். இறுதியில், அதிக செயல்திறன் மிக்க, நிலையான, மற்றும் தொழில்முறை ரியாக்ட் பயன்பாடுகளை எழுதத் தேவையான அறிவைப் பெறுவீர்கள்.

அத்தியாயம் 1: ரியாக்ட்டின் ரீகன்சிலியேஷன் மற்றும் விர்ச்சுவல் DOM-ஐப் புரிந்துகொள்ளுதல்

கீஸ்களின் முக்கியத்துவத்தைப் பாராட்டுவதற்கு முன், ரியாக்ட்டை வேகமாக்கும் அடிப்படை பொறிமுறையை நாம் முதலில் புரிந்து கொள்ள வேண்டும்: விர்ச்சுவல் DOM (VDOM) மூலம் இயக்கப்படும் ரீகன்சிலியேஷன்.

விர்ச்சுவல் DOM என்றால் என்ன?

உலாவியின் Document Object Model (DOM) உடன் நேரடியாகத் தொடர்புகொள்வது கணக்கீட்டு ரீதியாக செலவு மிக்கது. நீங்கள் DOM-இல் ஏதாவது ஒன்றை மாற்றும் ஒவ்வொரு முறையும்—ஒரு நோடைச் சேர்ப்பது, உரையை மாற்றுவது, அல்லது ஒரு ஸ்டைலை மாற்றுவது போல—உலாவி கணிசமான அளவு வேலை செய்ய வேண்டும். இது முழுப் பக்கத்திற்கும் ஸ்டைல்கள் மற்றும் லேஅவுட்டை மீண்டும் கணக்கிட வேண்டியிருக்கலாம், இந்த செயல்முறை ரீஃப்ளோ மற்றும் ரீபெயின்ட் என அழைக்கப்படுகிறது. ஒரு சிக்கலான, தரவு சார்ந்த பயன்பாட்டில், அடிக்கடி நேரடி DOM கையாளுதல்கள் செயல்திறனை விரைவாகக் குறைத்துவிடும்.

ரியாக்ட் இதைத் தீர்க்க ஒரு சுருக்க அடுக்கை அறிமுகப்படுத்துகிறது: விர்ச்சுவல் DOM. VDOM என்பது உண்மையான DOM-இன் ஒரு இலகுவான, மெமரியில் உள்ள பிரதிநிதித்துவம் ஆகும். இதை உங்கள் UI-இன் ஒரு வரைபடமாக நினையுங்கள். நீங்கள் ரியாக்ட்டிடம் UI-ஐப் புதுப்பிக்கச் சொல்லும்போது (உதாரணமாக, ஒரு காம்போனென்ட்டின் ஸ்டேட்டை மாற்றுவதன் மூலம்), ரியாக்ட் உடனடியாக உண்மையான DOM-ஐத் தொடாது. பதிலாக, அது பின்வரும் படிகளைச் செய்கிறது:

1. புதுப்பிக்கப்பட்ட ஸ்டேட்டைப் பிரதிநிதித்துவப்படுத்தும் ஒரு புதிய VDOM மரம் உருவாக்கப்படுகிறது.
2. இந்த புதிய VDOM மரம் முந்தைய VDOM மரத்துடன் ஒப்பிடப்படுகிறது. இந்த ஒப்பீட்டு செயல்முறை "டிஃப்பிங்" என்று அழைக்கப்படுகிறது.
3. பழைய VDOM-ஐ புதியதாக மாற்றுவதற்குத் தேவையான குறைந்தபட்ச மாற்றங்களை ரியாக்ட் கண்டறிகிறது.
4. இந்த குறைந்தபட்ச மாற்றங்கள் பின்னர் ஒன்றாக தொகுக்கப்பட்டு, ஒரே, திறமையான செயல்பாட்டில் உண்மையான DOM-இல் பயன்படுத்தப்படுகின்றன.

ரீகன்சிலியேஷன் என அறியப்படும் இந்த செயல்முறைதான் ரியாக்ட்டை மிகவும் செயல்திறன் மிக்கதாக ஆக்குகிறது. முழு வீட்டையும் மீண்டும் கட்டுவதற்குப் பதிலாக, ரியாக்ட் எந்த செங்கற்களை மாற்ற வேண்டும் என்பதைத் துல்லியமாக அடையாளம் காணும் ஒரு நிபுணர் ஒப்பந்தக்காரரைப் போல செயல்படுகிறது, இது வேலையையும் இடையூறையும் குறைக்கிறது.

அத்தியாயம் 2: கீஸ் இல்லாமல் பட்டியல்களை ரெண்டரிங் செய்வதில் உள்ள சிக்கல்

இப்போது, இந்த நேர்த்தியான அமைப்பு எங்கே சிக்கலில் மாட்டிக்கொள்ளும் என்று பார்ப்போம். பயனர்களின் பட்டியலை ரெண்டரிங் செய்யும் ஒரு எளிய காம்போனென்ட்டைக் கருத்தில் கொள்ளுங்கள்:

function UserList({ users }) {
  return (
    <ul>
      {users.map(user => (
        <li>{user.name}</li>
      ))}
    </ul>
  );
}

இந்த காம்போனென்ட் முதலில் ரெண்டர் ஆகும்போது, ரியாக்ட் ஒரு VDOM மரத்தை உருவாக்குகிறது. நாம் `users` வரிசையின் *இறுதியில்* ஒரு புதிய பயனரைச் சேர்த்தால், ரியாக்ட்டின் டிஃப்பிங் அல்காரிதம் அதை அழகாகக் கையாளுகிறது. அது பழைய மற்றும் புதிய பட்டியல்களை ஒப்பிட்டு, இறுதியில் ஒரு புதிய உருப்படி இருப்பதைக் கண்டு, உண்மையான DOM-இல் ஒரு புதிய `<li>`-ஐச் சேர்க்கிறது. திறமையான மற்றும் எளிமையானது.

ஆனால், பட்டியலின் ஆரம்பத்தில் ஒரு புதிய பயனரைச் சேர்த்தால், அல்லது உருப்படிகளை மறுவரிசைப்படுத்தினால் என்ன நடக்கும்?

நமது ஆரம்பப் பட்டியல் இது என்று வைத்துக்கொள்வோம்:

• ஆலிஸ்
• பாப்

ஒரு புதுப்பித்தலுக்குப் பிறகு, அது இப்படி ஆகிறது:

• சார்லி
• ஆலிஸ்
• பாப்

எந்த தனிப்பட்ட அடையாளங்களும் இல்லாமல், ரியாக்ட் இரண்டு பட்டியல்களையும் அவற்றின் வரிசை (இண்டெக்ஸ்) அடிப்படையில் ஒப்பிடுகிறது. அது காண்பது இதுதான்:

• நிலை 0: பழைய உருப்படி "ஆலிஸ்". புதிய உருப்படி "சார்லி". இந்த நிலையில் உள்ள காம்போனென்ட் புதுப்பிக்கப்பட வேண்டும் என்று ரியாக்ட் முடிவு செய்கிறது. அது இருக்கும் DOM நோடை மாற்றி அதன் உள்ளடக்கத்தை "ஆலிஸ்" என்பதிலிருந்து "சார்லி" என்று மாற்றுகிறது.
• நிலை 1: பழைய உருப்படி "பாப்". புதிய உருப்படி "ஆலிஸ்". ரியாக்ட் இரண்டாவது DOM நோடை மாற்றி அதன் உள்ளடக்கத்தை "பாப்" என்பதிலிருந்து "ஆலிஸ்" என்று மாற்றுகிறது.
• நிலை 2: முன்பு இங்கு எந்த உருப்படியும் இல்லை. புதிய உருப்படி "பாப்". ரியாக்ட் "பாப்"-க்காக ஒரு புதிய DOM நோடை உருவாக்கிச் செருகுகிறது.

இது நம்பமுடியாத அளவிற்கு திறமையற்றது. ஆரம்பத்தில் "சார்லி"-க்காக ஒரு புதிய உறுப்பைச் செருகுவதற்குப் பதிலாக, ரியாக்ட் இரண்டு மாற்றங்களையும் ஒரு செருகலையும் செய்தது. ஒரு பெரிய பட்டியலுக்கு, அல்லது சொந்த ஸ்டேட் கொண்ட சிக்கலான பட்டியல் உருப்படிகளுக்கு, இந்த தேவையற்ற வேலை குறிப்பிடத்தக்க செயல்திறன் குறைவு மற்றும், மிக முக்கியமாக, காம்போனென்ட் ஸ்டேட்டில் சாத்தியமான பிழைகளுக்கு வழிவகுக்கிறது.

இதனால்தான், நீங்கள் மேலே உள்ள குறியீட்டை இயக்கினால், உங்கள் உலாவியின் டெவலப்பர் கன்சோல் ஒரு எச்சரிக்கையைக் காட்டும்: "Warning: Each child in a list should have a unique 'key' prop." ரியாக்ட் வெளிப்படையாக உங்களுக்குச் சொல்கிறது, அதன் வேலையைத் திறமையாகச் செய்ய அதற்கு உதவி தேவை என்று.

அத்தியாயம் 3: மீட்புக்கு வரும் `key` ப்ராப்

key ப்ராப் என்பது ரியாக்ட்டுக்குத் தேவையான குறிப்பு. இது நீங்கள் உறுப்புகளின் பட்டியல்களை உருவாக்கும்போது வழங்கும் ஒரு சிறப்பு ஸ்டிரிங் பண்புக்கூறு ஆகும். கீஸ் ஒவ்வொரு உறுப்புக்கும் மறு-ரெண்டர்கள் முழுவதும் ஒரு நிலையான மற்றும் தனித்துவமான அடையாளத்தை அளிக்கின்றன.

நமது `UserList` காம்போனென்ட்டை கீஸ்களுடன் மீண்டும் எழுதுவோம்:

function UserList({ users }) {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

இங்கே, ஒவ்வொரு `user` ஆப்ஜெக்ட்டுக்கும் ஒரு தனித்துவமான `id` ப்ராப்பர்ட்டி இருப்பதாக நாம் கருதுகிறோம் (உதாரணமாக, ஒரு தரவுத்தளத்திலிருந்து). இப்போது, நமது சூழ்நிலையை மீண்டும் பார்ப்போம்.

ஆரம்பத் தரவு:

[{ id: 'u1', name: 'Alice' }, { id: 'u2', name: 'Bob' }]

புதுப்பிக்கப்பட்ட தரவு:

[{ id: 'u3', name: 'Charlie' }, { id: 'u1', name: 'Alice' }, { id: 'u2', name: 'Bob' }]

கீஸ்களுடன், ரியாக்ட்டின் டிஃப்பிங் செயல்முறை மிகவும் புத்திசாலித்தனமானது:

1. ரியாக்ட் புதிய VDOM-இல் உள்ள `<ul>`-இன் சைல்டுகளைப் பார்த்து அவற்றின் கீஸ்களை சரிபார்க்கிறது. அது `u3`, `u1`, மற்றும் `u2`-ஐப் பார்க்கிறது.
2. பின்னர் அது முந்தைய VDOM-இன் சைல்டுகள் மற்றும் அவற்றின் கீஸ்களை சரிபார்க்கிறது. அது `u1` மற்றும் `u2`-ஐப் பார்க்கிறது.
3. `u1` மற்றும் `u2` கீஸ்களைக் கொண்ட காம்போனென்ட்கள் ஏற்கனவே உள்ளன என்று ரியாக்ட்டுக்குத் தெரியும். அது அவற்றை மாற்ற வேண்டியதில்லை; அவற்றின் தொடர்புடைய DOM நோடுகளை அவற்றின் புதிய நிலைகளுக்கு நகர்த்தினால் போதும்.
4. `u3` கீ புதியது என்பதை ரியாக்ட் பார்க்கிறது. அது "சார்லி"-க்காக ஒரு புதிய காம்போனென்ட் மற்றும் DOM நோடை உருவாக்கி அதை ஆரம்பத்தில் செருகுகிறது.

இதன் விளைவாக ஒரு ஒற்றை DOM செருகல் மற்றும் சில மறுவரிசைப்படுத்தல் ஏற்படுகிறது, இது நாம் முன்பு பார்த்த பல மாற்றங்கள் மற்றும் செருகலை விட மிகவும் திறமையானது. கீஸ் ஒரு நிலையான அடையாளத்தை வழங்குகின்றன, இது ரியாக்ட்டை ரெண்டர்கள் முழுவதும் உறுப்புகளை அவற்றின் வரிசையில் உள்ள நிலையைப் பொருட்படுத்தாமல் கண்காணிக்க அனுமதிக்கிறது.

அத்தியாயம் 4: சரியான கீ-ஐத் தேர்ந்தெடுப்பது - பொன்னான விதிகள்

`key` ப்ராப்பின் செயல்திறன் முற்றிலும் சரியான மதிப்பைத் தேர்ந்தெடுப்பதைப் பொறுத்தது. எச்சரிக்கையாக இருக்க வேண்டிய தெளிவான சிறந்த நடைமுறைகள் மற்றும் ஆபத்தான ஆன்டி-பேட்டர்ன்கள் உள்ளன.

சிறந்த கீ: தனித்துவமான மற்றும் நிலையான ஐடிகள்

சிறந்த கீ என்பது ஒரு பட்டியலுக்குள் ஒரு உருப்படியை தனித்துவமாகவும் நிரந்தரமாகவும் அடையாளம் காணும் ஒரு மதிப்பாகும். இது பெரும்பாலும் உங்கள் தரவு மூலத்திலிருந்து வரும் ஒரு தனித்துவமான ஐடி ஆகும்.

• இது அதன் சிப்ளிங்ஸ்களுக்குள் தனித்துவமானதாக இருக்க வேண்டும். கீஸ் உலகளவில் தனித்துவமாக இருக்க வேண்டியதில்லை, அந்த மட்டத்தில் ரெண்டர் செய்யப்படும் உறுப்புகளின் பட்டியலுக்குள் மட்டும் தனித்துவமாக இருந்தால் போதும். ஒரே பக்கத்தில் உள்ள இரண்டு வெவ்வேறு பட்டியல்கள் ஒரே கீயுடன் உருப்படிகளைக் கொண்டிருக்கலாம்.
• அது நிலையானதாக இருக்க வேண்டும். ஒரு குறிப்பிட்ட தரவு உருப்படியின் கீ ரெண்டர்களுக்கு இடையில் மாறக்கூடாது. நீங்கள் ஆலிஸின் தரவை மீண்டும் பெற்றால், அவளுக்கு அதே `id` இருக்க வேண்டும்.

கீஸ்களுக்கான சிறந்த மூலங்கள்:

• தரவுத்தள முதன்மை கீஸ் (எ.கா., `user.id`, `product.sku`)
• யுனிவர்சல் யூனிக் ஐடென்டிஃபையர்ஸ் (UUIDs)
• உங்கள் தரவிலிருந்து ஒரு தனித்துவமான, மாறாத ஸ்டிரிங் (எ.கா., ஒரு புத்தகத்தின் ISBN)

// நல்லது: தரவிலிருந்து ஒரு நிலையான, தனித்துவமான ஐடியைப் பயன்படுத்துதல்.
<div>
  {products.map(product => (
    <ProductItem key={product.sku} product={product} />
  ))}
</div>

ஆன்டி-பேட்டர்ன்: வரிசை இண்டெக்ஸை கீயாகப் பயன்படுத்துதல்

ஒரு பொதுவான தவறு வரிசை இண்டெக்ஸை கீயாகப் பயன்படுத்துவது:

// கெட்டது: வரிசை இண்டெக்ஸை கீயாகப் பயன்படுத்துதல்.
<div>
  {items.map((item, index) => (
    <ListItem key={index} item={item} />
  ))}
</div>

இது ரியாக்ட் எச்சரிக்கையை அமைதிப்படுத்தும் என்றாலும், இது తీవ్రமான சிக்கல்களுக்கு வழிவகுக்கும் மற்றும் பொதுவாக ஒரு ஆன்டி-பேட்டர்னாகக் கருதப்படுகிறது. இண்டெக்ஸை கீயாகப் பயன்படுத்துவது, ஒரு உருப்படியின் அடையாளம் பட்டியலிலுள்ள அதன் நிலையைப் பொறுத்தது என்று ரியாக்ட்டுக்குச் சொல்கிறது. பட்டியல் மறுவரிசைப்படுத்தப்பட்டால், வடிகட்டப்பட்டால், அல்லது ஆரம்பம் அல்லது நடுவிலிருந்து உருப்படிகள் சேர்க்கப்பட்டால்/நீக்கப்பட்டால், இது கீ இல்லாத அதே சிக்கலாகும்.

ஸ்டேட் மேலாண்மை பிழை:

இண்டெக்ஸ் கீஸ்களைப் பயன்படுத்துவதன் மிகவும் ஆபத்தான பக்க விளைவு, உங்கள் பட்டியல் உருப்படிகள் அவற்றின் சொந்த ஸ்டேட்டைக் கையாளும்போது தோன்றும். உள்ளீட்டுப் புலங்களின் பட்டியலைக் கற்பனை செய்து பாருங்கள்:

function UnstableList() {
  const [items, setItems] = React.useState([{ id: 1, text: 'First' }, { id: 2, text: 'Second' }]);

  const handleAddItemToTop = () => {
    setItems([{ id: 3, text: 'New Top' }, ...items]);
  };

  return (
    <div>
      <button onClick={handleAddItemToTop}>Add to Top</button>
      {items.map((item, index) => (
        <div key={index}>
          <label>{item.text}: </label>
          <input type="text" />
        </div>
      ))}
    </div>
  );
}

இந்த மனப் பயிற்சியை முயற்சிக்கவும்:

1. பட்டியல் "First" மற்றும் "Second" உடன் ரெண்டர் ஆகிறது.
2. நீங்கள் முதல் உள்ளீட்டுப் புலத்தில் ("First"-க்கானது) "Hello" என்று தட்டச்சு செய்கிறீர்கள்.
3. நீங்கள் "Add to Top" பட்டனைக் கிளிக் செய்கிறீர்கள்.

என்ன நடக்கும் என்று நீங்கள் எதிர்பார்க்கிறீர்கள்? "New Top"-க்காக ஒரு புதிய, காலி உள்ளீடு தோன்றும், மற்றும் "First"-க்கான உள்ளீடு ("Hello" கொண்டிருக்கும்) கீழே நகரும் என்று எதிர்பார்ப்பீர்கள். உண்மையில் என்ன நடக்கிறது? முதல் நிலையில் (இண்டெக்ஸ் 0) உள்ள உள்ளீட்டுப் புலம், "Hello"-வைக் கொண்டிருக்கிறது, அப்படியே இருக்கிறது. ஆனால் இப்போது அது புதிய தரவு உருப்படியான "New Top" உடன் தொடர்புடையது. உள்ளீட்டு காம்போனென்ட்டின் ஸ்டேட் (அதன் உள் மதிப்பு) அது பிரதிநிதித்துவப்படுத்த வேண்டிய தரவுடன் அல்ல, அதன் நிலையுடன் (key=0) பிணைக்கப்பட்டுள்ளது. இது இண்டெக்ஸ் கீஸ்களால் ஏற்படும் ஒரு உன்னதமான மற்றும் குழப்பமான பிழையாகும்.

நீங்கள் வெறுமனே `key={index}` என்பதை `key={item.id}` என்று மாற்றினால், சிக்கல் தீர்க்கப்படும். ரியாக்ட் இப்போது காம்போனென்ட்டின் ஸ்டேட்டை தரவின் நிலையான ஐடியுடன் சரியாக இணைக்கும்.

ஒரு இண்டெக்ஸ் கீ-ஐப் பயன்படுத்துவது எப்போது ஏற்றுக்கொள்ளத்தக்கது?

இண்டெக்ஸைப் பயன்படுத்துவது பாதுகாப்பானதாக இருக்கும் அரிதான சூழ்நிலைகள் உள்ளன, ஆனால் நீங்கள் இந்த அனைத்து நிபந்தனைகளையும் பூர்த்தி செய்ய வேண்டும்:

1. பட்டியல் நிலையானது: அது ஒருபோதும் மறுவரிசைப்படுத்தப்படாது, வடிகட்டப்படாது, அல்லது இறுதியைத் தவிர வேறு எங்கிருந்தும் உருப்படிகள் சேர்க்கப்படாது/நீக்கப்படாது.
2. பட்டியலிலுள்ள உருப்படிகளுக்கு நிலையான ஐடிகள் இல்லை.
3. ஒவ்வொரு உருப்படிக்காகவும் ரெண்டர் செய்யப்படும் காம்போனென்ட்கள் எளிமையானவை மற்றும் உள் ஸ்டேட் இல்லை.

அப்படியிருந்தாலும், முடிந்தால் ஒரு தற்காலிக ஆனால் நிலையான ஐடியை உருவாக்குவது பெரும்பாலும் நல்லது. இண்டெக்ஸைப் பயன்படுத்துவது எப்போதும் ஒரு இயல்புநிலையாக இல்லாமல், ஒரு வேண்டுமென்றே செய்யப்பட்ட தேர்வாக இருக்க வேண்டும்.

மிக மோசமான குற்றவாளி: `Math.random()`

ஒருபோதும் `Math.random()` அல்லது வேறு எந்த தீர்மானிக்கப்படாத மதிப்பையும் கீயாகப் பயன்படுத்த வேண்டாம்:

// மிக மோசம்: இதைச் செய்யாதீர்கள்!
<div>
  {items.map(item => (
    <ListItem key={Math.random()} item={item} />
  ))}
</div>

`Math.random()` மூலம் உருவாக்கப்பட்ட ஒரு கீ ஒவ்வொரு ரெண்டரிலும் வித்தியாசமாக இருக்கும் என்பது உறுதி. இது ரியாக்ட்டுக்கு முந்தைய ரெண்டரிலிருந்து வந்த முழு காம்போனென்ட் பட்டியலும் அழிக்கப்பட்டு, முற்றிலும் ভিন্নமான காம்போனென்ட்களின் புத்தம் புதிய பட்டியல் உருவாக்கப்பட்டுள்ளது என்று சொல்கிறது. இது ரியாக்ட்டை அனைத்து பழைய காம்போனென்ட்களையும் அன்மவுன்ட் செய்யவும் (அவற்றின் ஸ்டேட்டை அழித்து) மற்றும் அனைத்து புதிய காம்போனென்ட்களையும் மவுன்ட் செய்யவும் கட்டாயப்படுத்துகிறது. இது ரீகன்சிலியேஷனின் நோக்கத்தை முற்றிலும் தோற்கடிக்கிறது மற்றும் செயல்திறனுக்கு சாத்தியமான மிக மோசமான விருப்பமாகும்.

அத்தியாயம் 5: மேம்பட்ட கருத்துகள் மற்றும் பொதுவான கேள்விகள்

கீஸ் மற்றும் `React.Fragment`

சில நேரங்களில் நீங்கள் ஒரு `map` கால்பேக்கிலிருந்து பல உறுப்புகளைத் திருப்பி அனுப்ப வேண்டியிருக்கும். இதைச் செய்வதற்கான நிலையான வழி `React.Fragment` உடன் உள்ளது. நீங்கள் இதைச் செய்யும்போது, `key` ஆனது `Fragment` காம்போனென்ட்டிலேயே வைக்கப்பட வேண்டும்.

function Glossary({ terms }) {
  return (
    <dl>
      {terms.map(term => (
        // கீ Fragment-இல் செல்கிறது, சைல்டுகளில் அல்ல.
        <React.Fragment key={term.id}>
          <dt>{term.name}</dt>
          <dd>{term.definition}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

முக்கியம்: சுருக்கெழுத்து தொடரியல் `<>...</>` கீஸ்களை ஆதரிக்காது. உங்கள் பட்டியலுக்கு ஃபிராக்மென்ட்கள் தேவைப்பட்டால், நீங்கள் வெளிப்படையான `<React.Fragment>` தொடரியலைப் பயன்படுத்த வேண்டும்.

கீஸ் சிப்ளிங்ஸ்களுக்குள் மட்டும் தனித்துவமாக இருக்க வேண்டும்

ஒரு பொதுவான தவறான கருத்து என்னவென்றால், கீஸ் உங்கள் முழு பயன்பாட்டிலும் உலகளவில் தனித்துவமாக இருக்க வேண்டும் என்பதுதான். இது உண்மையல்ல. ஒரு கீ அதன் உடனடி சிப்ளிங்ஸ் பட்டியலுக்குள் மட்டும் தனித்துவமாக இருந்தால் போதும்.

function CourseRoster({ courses }) {
  return (
    <div>
      {courses.map(course => (
        <div key={course.id}>  {/* பாடத்திற்கான கீ */} 
          <h3>{course.title}</h3>
          <ul>
            {course.students.map(student => (
              // இந்த மாணவர் கீ இந்த குறிப்பிட்ட பாடத்தின் மாணவர் பட்டியலுக்குள் மட்டும் தனித்துவமாக இருக்க வேண்டும்.
              <li key={student.id}>{student.name}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

மேலே உள்ள எடுத்துக்காட்டில், இரண்டு வெவ்வேறு பாடங்களில் `id: 's1'` கொண்ட ஒரு மாணவர் இருக்கலாம். இது முற்றிலும் சரி, ஏனெனில் கீஸ் வெவ்வேறு பெற்றோர் `<ul>` உறுப்புகளுக்குள் மதிப்பிடப்படுகின்றன.

காம்போனென்ட் ஸ்டேட்டை வேண்டுமென்றே மீட்டமைக்க கீஸ்களைப் பயன்படுத்துதல்

கீஸ் முதன்மையாக பட்டியல் மேம்படுத்தலுக்கானவை என்றாலும், அவை ஒரு ஆழமான நோக்கத்திற்கு உதவுகின்றன: அவை ஒரு காம்போனென்ட்டின் அடையாளத்தை வரையறுக்கின்றன. ஒரு காம்போனென்ட்டின் கீ மாறினால், ரியாக்ட் இருக்கும் காம்போனென்ட்டைப் புதுப்பிக்க முயற்சிக்காது. பதிலாக, அது பழைய காம்போனென்ட்டையும் (மற்றும் அதன் அனைத்து சைல்டுகளையும்) அழித்து, புதிதாக ஒன்றை உருவாக்கும். இது பழைய நிகழ்வை அன்மவுன்ட் செய்து, புதிய ஒன்றை மவுன்ட் செய்கிறது, அதன் ஸ்டேட்டை திறம்பட மீட்டமைக்கிறது.

இது ஒரு காம்போனென்ட்டை மீட்டமைக்க ஒரு சக்திவாய்ந்த மற்றும் டிஸ்க்லரேடிவ் வழியாக இருக்கலாம். உதாரணமாக, ஒரு `userId`-ஐ அடிப்படையாகக் கொண்டு தரவைப் பெறும் `UserProfile` காம்போனென்ட்டைக் கற்பனை செய்து பாருங்கள்.

function App() {
  const [userId, setUserId] = React.useState('user-1');

  return (
    <div>
      <button onClick={() => setUserId('user-1')}>View User 1</button>
      <button onClick={() => setUserId('user-2')}>View User 2</button>
      
      <UserProfile key={userId} id={userId} />
    </div>
  );
}

`UserProfile` காம்போனென்ட்டில் `key={userId}`-ஐ வைப்பதன் மூலம், `userId` மாறும்போதெல்லாம், முழு `UserProfile` காம்போனென்ட்டும் தூக்கி எறியப்பட்டு ஒரு புதியது உருவாக்கப்படும் என்று நாம் உத்தரவாதம் அளிக்கிறோம். இது முந்தைய பயனரின் சுயவிவரத்திலிருந்து (படிவத் தரவு அல்லது பெறப்பட்ட உள்ளடக்கம் போன்றவை) ஸ்டேட் தங்கிவிடும் சாத்தியமான பிழைகளைத் தடுக்கிறது. இது காம்போனென்ட் அடையாளம் மற்றும் வாழ்க்கைச் சுழற்சியை நிர்வகிப்பதற்கான ஒரு சுத்தமான மற்றும் வெளிப்படையான வழியாகும்.

முடிவுரை: சிறந்த ரியாக்ட் குறியீட்டை எழுதுதல்

`key` ப்ராப் என்பது ஒரு கன்சோல் எச்சரிக்கையை அமைதிப்படுத்துவதற்கான வழியை விட அதிகம். இது ரியாக்ட்டுக்கான ஒரு அடிப்படை அறிவுறுத்தல், அதன் ரீகன்சிலியேஷன் அல்காரிதம் திறமையாகவும் சரியாகவும் செயல்படத் தேவையான முக்கியமான தகவல்களை வழங்குகிறது. கீஸ்களின் பயன்பாட்டில் தேர்ச்சி பெறுவது ஒரு தொழில்முறை ரியாக்ட் டெவலப்பரின் அடையாளமாகும்.

முக்கியமான பாடங்களைச் சுருக்கமாகக் காண்போம்:

• செயல்திறனுக்கு கீஸ் அவசியம்: அவை ரியாக்ட்டின் டிஃப்பிங் அல்காரிதம் ஒரு பட்டியலில் உள்ள உறுப்புகளை தேவையற்ற DOM மாற்றங்கள் இல்லாமல் திறமையாகச் சேர்க்க, நீக்க, மற்றும் மறுவரிசைப்படுத்த உதவுகின்றன.
• எப்போதும் நிலையான மற்றும் தனித்துவமான ஐடிகளைப் பயன்படுத்துங்கள்: சிறந்த கீ என்பது உங்கள் தரவிலிருந்து வரும் ஒரு தனித்துவமான அடையாளங்காட்டி ஆகும், இது ரெண்டர்களுக்கு இடையில் மாறாது.
• வரிசை இண்டெக்ஸை கீஸ்களாகத் தவிர்க்கவும்: ஒரு உருப்படியின் இண்டெக்ஸை அதன் கீயாகப் பயன்படுத்துவது மோசமான செயல்திறன் மற்றும் நுட்பமான, எரிச்சலூட்டும் ஸ்டேட் மேலாண்மை பிழைகளுக்கு வழிவகுக்கும், குறிப்பாக டைனமிக் பட்டியல்களில்.
• ஒருபோதும் சீரற்ற அல்லது நிலையற்ற கீஸ்களைப் பயன்படுத்த வேண்டாம்: இது மிக மோசமான சூழ்நிலை, ஏனெனில் இது ரியாக்ட்டை ஒவ்வொரு ரெண்டரிலும் முழு காம்போனென்ட் பட்டியலையும் மீண்டும் உருவாக்க கட்டாயப்படுத்துகிறது, செயல்திறன் மற்றும் ஸ்டேட்டை அழிக்கிறது.
• கீஸ் காம்போனென்ட் அடையாளத்தை வரையறுக்கின்றன: ஒரு காம்போனென்ட்டின் கீயை மாற்றுவதன் மூலம் அதன் ஸ்டேட்டை வேண்டுமென்றே மீட்டமைக்க இந்த நடத்தையைப் பயன்படுத்தலாம்.

இந்தக் கொள்கைகளை உள்வாங்கிக் கொள்வதன் மூலம், நீங்கள் வேகமான, நம்பகமான ரியாக்ட் பயன்பாடுகளை எழுதுவது மட்டுமல்லாமல், நூலகத்தின் முக்கிய இயக்கவியல் பற்றிய ஆழமான புரிதலையும் பெறுவீர்கள். அடுத்த முறை நீங்கள் ஒரு பட்டியலை ரெண்டர் செய்ய ஒரு வரிசையின் மீது மேப் செய்யும்போது, `key` ப்ராப்புக்கு அது தகுதியான கவனத்தைக் கொடுங்கள். உங்கள் பயன்பாட்டின் செயல்திறன்—மற்றும் உங்கள் எதிர்கால சுயம்—அதற்கு நன்றி தெரிவிக்கும்.