ரியாக்ட் ரீகன்சிலியேஷன்: விர்ச்சுவல் DOM டிஃபிங் மற்றும் செயல்திறனுக்கான முக்கிய உத்திகளில் தேர்ச்சி பெறுதல்

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

ரியாக்ட் ரீகன்சிலியேஷன் என்றால் என்ன?

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

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

விர்ச்சுவல் DOM: ரியாக்ட்டின் ரகசிய ஆயுதம்

விர்ச்சுவல் DOM என்பது UI-இன் கட்டமைப்பு மற்றும் உள்ளடக்கத்தைக் குறிக்கும் ஒரு ஜாவாஸ்கிரிப்ட் ஆப்ஜெக்ட் ஆகும். இது அடிப்படையில் உண்மையான DOM-இன் ஒரு இலகுவான நகலாகும். ரியாக்ட் விர்ச்சுவல் DOM-ஐப் பயன்படுத்துகிறது:

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

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

டிஃபிங் அல்காரிதம்: குறைந்தபட்ச மாற்றங்களைக் கண்டறிதல்

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

1. வெவ்வேறு வகை கொண்ட இரண்டு எலிமென்ட்கள் வெவ்வேறு மரங்களை (trees) உருவாக்கும். ரியாக்ட் வெவ்வேறு வகைகளைக் கொண்ட இரண்டு எலிமென்ட்களை (எ.கா., ஒரு <div> மற்றும் ஒரு <span>) சந்திக்கும்போது, அது பழைய மரத்தை முழுமையாக நீக்கிவிட்டு புதிய மரத்தை உருவாக்கும்.
2. ஒரு டெவலப்பர், key ப்ராப் மூலம் வெவ்வேறு ரெண்டர்களில் எந்த குழந்தை எலிமென்ட்கள் நிலையானதாக இருக்கலாம் என்பதைக் குறிப்பிட முடியும். key ப்ராப்பைப் பயன்படுத்துவது, எந்த எலிமென்ட்கள் மாற்றப்பட்டுள்ளன, சேர்க்கப்பட்டுள்ளன அல்லது அகற்றப்பட்டுள்ளன என்பதைத் திறமையாக அடையாளம் காண ரியாக்ட்டுக்கு உதவுகிறது.

டிஃபிங் அல்காரிதம் எவ்வாறு செயல்படுகிறது:

1. எலிமென்ட் வகை ஒப்பீடு: ரியாக்ட் முதலில் ரூட் எலிமென்ட்களை ஒப்பிடுகிறது. அவை வெவ்வேறு வகைகளைக் கொண்டிருந்தால், ரியாக்ட் பழைய மரத்தை அகற்றிவிட்டு புதிதாக ஒரு மரத்தை உருவாக்குகிறது. எலிமென்ட் வகைகள் ஒன்றாக இருந்தாலும், அவற்றின் பண்புக்கூறுகள் (attributes) மாறியிருந்தால், ரியாக்ட் மாறிய பண்புக்கூறுகளை மட்டுமே புதுப்பிக்கிறது.
2. காம்போனென்ட் புதுப்பிப்பு: ரூட் எலிமென்ட்கள் ஒரே காம்போனென்ட்டாக இருந்தால், ரியாக்ட் காம்போனென்ட்டின் ப்ராப்ஸ்களைப் புதுப்பித்து அதன் render() மெத்தடை அழைக்கிறது. பின்னர், டிஃபிங் செயல்முறை காம்போனென்ட்டின் சைல்டுகளில் தொடர்கிறது.
3. பட்டியல் ரீகன்சிலியேஷன்: சைல்டுகளின் பட்டியலை மீண்டும் மீண்டும் செய்யும்போது, ரியாக்ட் key ப்ராப்பைப் பயன்படுத்தி எந்த எலிமென்ட்கள் சேர்க்கப்பட்டன, அகற்றப்பட்டன அல்லது நகர்த்தப்பட்டன என்பதைத் திறமையாகத் தீர்மானிக்கிறது. கீகள் இல்லாமல், ரியாக்ட் அனைத்து சைல்டுகளையும் மீண்டும் ரெண்டர் செய்ய வேண்டியிருக்கும், இது பெரிய பட்டியல்களுக்குத் திறனற்றதாக இருக்கும்.

உதாரணம் (கீகள் இல்லாமல்):

கீகள் இல்லாமல் ரெண்டர் செய்யப்பட்ட பொருட்களின் பட்டியலைக் கற்பனை செய்து பாருங்கள்:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

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

உதாரணம் (கீகளுடன்):

இப்போது, அதே பட்டியலை கீகளுடன் கருத்தில் கொள்ளுங்கள்:

<ul>
  <li key="item1">Item 1</li>
  <li key="item2">Item 2</li>
  <li key="item3">Item 3</li>
</ul>

நீங்கள் பட்டியலின் தொடக்கத்தில் ஒரு புதிய பொருளைச் செருகினால், ஒரே ஒரு புதிய பொருள் மட்டுமே சேர்க்கப்பட்டுள்ளது மற்றும் தற்போதுள்ள பொருட்கள் வெறுமனே கீழே நகர்த்தப்பட்டுள்ளன என்பதை ரியாக்ட் திறமையாகத் தீர்மானிக்க முடியும். இது key ப்ராப்பைப் பயன்படுத்தி தற்போதுள்ள பொருட்களை அடையாளம் கண்டு தேவையற்ற மறு-ரெண்டர்களைத் தவிர்க்கிறது. இந்த வழியில் கீகளைப் பயன்படுத்துவது, 'Item 1', 'Item 2' மற்றும் 'Item 3' க்கான பழைய DOM எலிமென்ட்கள் உண்மையில் மாறவில்லை என்பதை விர்ச்சுவல் DOM-க்குப் புரிய வைக்கிறது, எனவே அவை உண்மையான DOM-இல் புதுப்பிக்கப்படத் தேவையில்லை. புதிய எலிமென்ட்டை வெறுமனே உண்மையான DOM-இல் செருக முடியும்.

key ப்ராப் உடன் பிறந்தவைகளுக்குள் (siblings) தனித்துவமாக இருக்க வேண்டும். உங்கள் தரவிலிருந்து ஒரு தனிப்பட்ட ஐடியைப் பயன்படுத்துவது ஒரு பொதுவான வடிவமாகும்:

<ul>
  {items.map(item => (
    <li key={item.id}>{item.name}</li>
  ))}
</ul>

ரியாக்ட் செயல்திறனை மேம்படுத்துவதற்கான முக்கிய உத்திகள்

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

1. கீகளைத் திறம்படப் பயன்படுத்துங்கள்

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

உதாரணம்: தவறான கீ பயன்பாடு (இன்டெக்ஸ் ஒரு கீயாக)

<ul>
  {items.map((item, index) => (
    <li key={index}>{item.name}</li>
  ))}
</ul>

இது ஏன் தவறானது: items-இன் வரிசை மாறினால், ஒவ்வொரு பொருளுக்கும் index மாறும், இதனால் ரியாக்ட் அனைத்து பட்டியல் பொருட்களையும் மீண்டும் ரெண்டர் செய்ய நேரிடும், அவற்றின் உள்ளடக்கம் மாறாவிட்டாலும் கூட.

உதாரணம்: சரியான கீ பயன்பாடு (தனிப்பட்ட ஐடி)

<ul>
  {items.map(item => (
    <li key={item.id}>{item.name}</li>
  ))}
</ul>

இது ஏன் நல்லது: item.id என்பது ஒவ்வொரு பொருளுக்கும் ஒரு நிலையான மற்றும் தனித்துவமான அடையாளங்காட்டி ஆகும். items-இன் வரிசை மாறினாலும், ரியாக்ட் ஒவ்வொரு பொருளையும் திறமையாக அடையாளம் கண்டு, உண்மையில் மாறிய பொருட்களை மட்டுமே மீண்டும் ரெண்டர் செய்ய முடியும்.

2. தேவையற்ற மறு-ரெண்டர்களைத் தவிர்க்கவும்

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

• பியூர் காம்போனென்ட்கள் (Pure Components): ரியாக்ட் React.PureComponent வகுப்பை வழங்குகிறது, இது shouldComponentUpdate()-இல் ஒரு ஷாலோ (shallow) ப்ராப் மற்றும் ஸ்டேட் ஒப்பீட்டைச் செயல்படுத்துகிறது. ப்ராப்ஸ் மற்றும் ஸ்டேட் ஷாலோவாக மாறவில்லை என்றால், காம்போனென்ட் மீண்டும் ரெண்டர் ஆகாது. ஷாலோ ஒப்பீடு ப்ராப்ஸ் மற்றும் ஸ்டேட் ஆப்ஜெக்ட்களின் ரெபரன்ஸ்கள் மாறியுள்ளதா என்பதைச் சரிபார்க்கிறது.
• React.memo: ஃபங்ஷனல் காம்போனென்ட்களுக்கு, காம்போனென்ட்டை மெமோயிஸ் (memoize) செய்ய React.memo-வைப் பயன்படுத்தலாம். React.memo என்பது ஒரு உயர்-வரிசை காம்போனென்ட் ஆகும், இது ஒரு ஃபங்ஷனல் காம்போனென்ட்டின் முடிவை மெமோயிஸ் செய்கிறது. இயல்பாக, இது ப்ராப்ஸ்களை ஷாலோவாக ஒப்பிடும்.
• shouldComponentUpdate(): கிளாஸ் காம்போனென்ட்களுக்கு, ஒரு காம்போனென்ட் எப்போது மீண்டும் ரெண்டர் செய்யப்பட வேண்டும் என்பதைக் கட்டுப்படுத்த shouldComponentUpdate() லைஃப்சைக்கிள் மெத்தடை நீங்கள் செயல்படுத்தலாம். இது மறு-ரெண்டர் அவசியமா என்பதைத் தீர்மானிக்க தனிப்பயன் தர்க்கத்தைச் செயல்படுத்த உங்களை அனுமதிக்கிறது. இருப்பினும், இந்த மெத்தடைப் பயன்படுத்தும்போது கவனமாக இருங்கள், ஏனெனில் சரியாகச் செயல்படுத்தப்படாவிட்டால் பிழைகளை அறிமுகப்படுத்துவது எளிது.

உதாரணம்: React.memo-வைப் பயன்படுத்துதல்

const MyComponent = React.memo(function MyComponent(props) {
  // Render logic here
  return <div>{props.data}</div>;
});

இந்த எடுத்துக்காட்டில், MyComponent-க்கு அனுப்பப்பட்ட props ஷாலோவாக மாறினால் மட்டுமே அது மீண்டும் ரெண்டர் ஆகும்.

3. இம்யூட்டபிலிட்டி (Immutability)

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

உதாரணம்: தரவை மாற்றுதல் (தவறானது)

const items = this.state.items;
items.push({ id: 'new-item', name: 'New Item' }); // Mutates the original array
this.setState({ items });

உதாரணம்: இம்யூட்டபிள் புதுப்பிப்பு (சரியானது)

this.setState(prevState => ({
  items: [...prevState.items, { id: 'new-item', name: 'New Item' }]
}));

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

4. கான்டெக்ஸ்ட் பயன்பாட்டை மேம்படுத்துங்கள்

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

கான்டெக்ஸ்ட் பயன்பாட்டை மேம்படுத்துவதற்கான உத்திகள்:

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

5. கோட் ஸ்பிளிட்டிங் (Code Splitting)

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

• React.lazy மற்றும் Suspense: இந்த அம்சங்கள் காம்போனென்ட்களை டைனமிக்காக இறக்குமதி செய்து, அவை தேவைப்படும்போது மட்டுமே ரெண்டர் செய்ய உங்களை அனுமதிக்கின்றன. React.lazy காம்போனென்ட்டை சோம்பேறித்தனமாக ஏற்றுகிறது, மேலும் Suspense காம்போனென்ட் ஏற்றப்படும்போது ஒரு ஃபால்பேக் UI-ஐ வழங்குகிறது.
• டைனமிக் இறக்குமதிகள்: தேவைக்கேற்ப மாட்யூல்களை ஏற்றுவதற்கு நீங்கள் டைனமிக் இறக்குமதிகளை (import()) பயன்படுத்தலாம். இது தேவைப்படும்போது மட்டுமே கோடை ஏற்றுவதற்கு உங்களை அனுமதிக்கிறது, ஆரம்ப ஏற்றுதல் நேரத்தைக் குறைக்கிறது.

உதாரணம்: React.lazy மற்றும் Suspense-ஐப் பயன்படுத்துதல்

const MyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
}

6. டிபவுன்சிங் மற்றும் த்ராட்லிங் (Debouncing and Throttling)

டிபவுன்சிங் மற்றும் த்ராட்லிங் என்பது ஒரு ஃபங்ஷன் செயல்படுத்தப்படும் விகிதத்தைக் கட்டுப்படுத்துவதற்கான நுட்பங்களாகும். scroll, resize, மற்றும் input போன்ற அடிக்கடி நிகழும் நிகழ்வுகளைக் கையாள இது பயனுள்ளதாக இருக்கும். இந்த நிகழ்வுகளை டிபவுன்சிங் அல்லது த்ராட்லிங் செய்வதன் மூலம், உங்கள் பயன்பாடு பதிலளிக்காமல் போவதைத் தடுக்கலாம்.

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

7. ஒரு புரொஃபைலரைப் பயன்படுத்தவும்

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

சர்வதேசப் பரிசீலனைகள்

உலகளாவிய பார்வையாளர்களுக்காக ரியாக்ட் பயன்பாடுகளை உருவாக்கும்போது, சர்வதேசமயமாக்கல் (i18n) மற்றும் உள்ளூர்மயமாக்கல் (l10n) ஆகியவற்றைக் கருத்தில் கொள்வது அவசியம். இது உங்கள் பயன்பாடு வெவ்வேறு நாடுகள் மற்றும் கலாச்சாரங்களைச் சேர்ந்த பயனர்களுக்கு அணுகக்கூடியதாகவும், பயனர் நட்புடையதாகவும் இருப்பதை உறுதி செய்கிறது.

• உரை திசை (RTL): அரபு மற்றும் ஹீப்ரு போன்ற சில மொழிகள் வலமிருந்து இடமாக (RTL) எழுதப்படுகின்றன. உங்கள் பயன்பாடு RTL தளவமைப்புகளை ஆதரிக்கிறதா என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள்.
• தேதி மற்றும் எண் வடிவமைப்பு: வெவ்வேறு இடங்களுக்குப் பொருத்தமான தேதி மற்றும் எண் வடிவங்களைப் பயன்படுத்தவும்.
• நாணய வடிவமைப்பு: பயனரின் இருப்பிடத்திற்குச் சரியான வடிவத்தில் நாணய மதிப்புகளைக் காண்பிக்கவும்.
• மொழிபெயர்ப்பு: உங்கள் பயன்பாட்டில் உள்ள அனைத்து உரைக்கும் மொழிபெயர்ப்புகளை வழங்கவும். மொழிபெயர்ப்புகளைத் திறமையாக நிர்வகிக்க ஒரு மொழிபெயர்ப்பு மேலாண்மை அமைப்பைப் பயன்படுத்தவும். i18next அல்லது react-intl போன்ற பல லைப்ரரிகள் இதற்கு உதவக்கூடும்.

உதாரணமாக, ஒரு எளிய தேதி வடிவம்:

• USA: MM/DD/YYYY
• Europe: DD/MM/YYYY
• Japan: YYYY/MM/DD

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

முடிவுரை

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