ரியாக்ட் ஃபைபர் ரீகன்சிலியேஷன் புரொஃபைலர்: காம்போனென்ட் அப்டேட் செயல்திறனை வெளிக்கொணர்தல்

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

ரியாக்ட் ஃபைபர் மற்றும் ரீகன்சிலியேஷன்-ஐப் புரிந்துகொள்ளுதல்

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

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

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

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

ரீகன்சிலியேஷன் நிலைகள்:

1. ரெண்டர் நிலை: என்ன மாற்றங்கள் செய்யப்பட வேண்டும் என்பதை ரியாக்ட் தீர்மானிக்கிறது. இங்குதான் மெய்நிகர் DOM உருவாக்கப்பட்டு முந்தைய மெய்நிகர் DOM உடன் ஒப்பிடப்படுகிறது. இந்த நிலை ஒத்திசைவற்றதாகவும் குறுக்கிடக்கூடியதாகவும் இருக்கலாம்.
2. கமிட் நிலை: ரியாக்ட் DOM இல் மாற்றங்களைப் பயன்படுத்துகிறது. இந்த நிலை ஒத்திசைவானது மற்றும் குறுக்கிட முடியாது.

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

ரியாக்ட் புரொஃபைலரை அறிமுகப்படுத்துதல்

ரியாக்ட் புரொஃபைலர் என்பது ரியாக்ட்டில் கட்டமைக்கப்பட்ட ஒரு சக்திவாய்ந்த கருவியாகும் (ரியாக்ட் v16.5+ முதல் கிடைக்கிறது), இது டெவலப்பர்கள் தங்கள் ரியாக்ட் செயலிகளின் செயல்திறனைப் பகுப்பாய்வு செய்ய அனுமதிக்கிறது. இது காம்போனென்ட்டுகளின் ரெண்டரிங் நடத்தை குறித்த விரிவான நுண்ணறிவுகளை வழங்குகிறது, அவற்றுள்:

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

ரியாக்ட் புரொஃபைலரைப் பயன்படுத்துவதன் மூலம், டெவலப்பர்கள் செயல்திறன் சிக்கல்களைக் கண்டறியலாம், தேவையற்ற முறையில் மீண்டும் ரெண்டர் ஆகும் காம்போனென்ட்டுகளை அடையாளம் காணலாம், மற்றும் செயலியின் வேகத்தையும் பதிலளிக்கும் தன்மையையும் மேம்படுத்த தங்கள் கோடை மேம்படுத்தலாம். வலைச் செயலிகள் பெருகிய முறையில் சிக்கலானதாகி, பெரும் அளவிலான தரவைக் கையாண்டு, டைனமிக் பயனர் அனுபவங்களை வழங்கும் போது இது மிகவும் முக்கியமானது. புரொஃபைலரில் இருந்து பெறப்பட்ட நுண்ணறிவுகள் உலகளாவிய பயனர் தளத்திற்காக உயர் செயல்திறன் கொண்ட வலைச் செயலிகளைக் கட்டமைப்பதில் бесценные ஆகும்.

ரியாக்ட் புரொஃபைலரை எவ்வாறு பயன்படுத்துவது

ரியாக்ட் புரொஃபைலரை Chrome மற்றும் Firefox (மற்றும் பிற உலாவிகளுக்கான) நீட்டிப்பான ரியாக்ட் டெவலப்பர் கருவிகள் மூலம் அணுகலாம் மற்றும் பயன்படுத்தலாம். புரொஃபைலிங்கைத் தொடங்க, இந்தப் படிகளைப் பின்பற்றவும்:

1. ரியாக்ட் டெவலப்பர் கருவிகளை நிறுவவும்: உங்கள் உலாவியில் ரியாக்ட் டெவலப்பர் கருவிகள் நீட்டிப்பு நிறுவப்பட்டுள்ளதா என்பதை உறுதிப்படுத்தவும்.
2. புரொஃபைலரை இயக்கவும்: உங்கள் உலாவியின் டெவலப்பர் கன்சோலில் ரியாக்ட் டெவலப்பர் கருவிகளைத் திறக்கவும். நீங்கள் வழக்கமாக ஒரு 'Profiler' தாவலைக் காண்பீர்கள்.
3. புரொஃபைலிங்கைத் தொடங்கவும்: 'Start profiling' பொத்தானைக் கிளிக் செய்யவும். இது செயல்திறன் தரவைப் பதிவுசெய்யத் தொடங்கும்.
4. உங்கள் செயலியுடன் தொடர்பு கொள்ளவும்: காம்போனென்ட் புதுப்பிப்புகள் மற்றும் ரெண்டர்களைத் தூண்டும் வகையில் உங்கள் செயலியுடன் தொடர்பு கொள்ளவும். உதாரணமாக, ஒரு பொத்தானைக் கிளிக் செய்வதன் மூலம் அல்லது ஒரு படிவ உள்ளீட்டை மாற்றுவதன் மூலம் ஒரு புதுப்பிப்பைத் தூண்டவும்.
5. புரொஃபைலிங்கை நிறுத்தவும்: நீங்கள் பகுப்பாய்வு செய்ய விரும்பும் செயல்களைச் செய்த பிறகு, 'Stop profiling' பொத்தானைக் கிளிக் செய்யவும்.
6. முடிவுகளைப் பகுப்பாய்வு செய்யவும்: புரொஃபைலர் ரெண்டர் நேரங்கள், காம்போனென்ட் படிநிலைகள் மற்றும் மீண்டும் ரெண்டர் ஆவதற்கான காரணங்கள் ஆகியவற்றின் விரிவான பகுப்பாய்வைக் காண்பிக்கும்.

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

ரியாக்ட் புரொஃபைலர் மூலம் காம்போனென்ட் அப்டேட் செயல்திறனைப் பகுப்பாய்வு செய்தல்

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

1. மெதுவாக ரெண்டர் ஆகும் காம்போனென்ட்டுகளைக் கண்டறிதல்

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

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

2. ரெண்டர்களின் எண்ணிக்கையைப் புரிந்துகொள்ளுதல்

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

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

3. மீண்டும் ரெண்டர் ஆவதற்கான காரணத்தைக் கண்டறிதல்

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

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

4. கமிட் நேரங்களைப் பகுப்பாய்வு செய்தல்

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

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

நடைமுறை மேம்படுத்தல் நுட்பங்கள்

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

1. `React.memo` மற்றும் `PureComponent`-ஐப் பயன்படுத்துதல்

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

எடுத்துக்காட்டு:

            import React from 'react';

const MyComponent = React.memo(function MyComponent({ prop1, prop2 }) {
  console.log('Rendering MyComponent');
  return (
    <div>
      <p>Prop 1: {prop1}</p>
      <p>Prop 2: {prop2}</p>
    </div>
  );
});

export default MyComponent;
            

              
                Copy
              
            
          

`PureComponent` என்பது கிளாஸ் காம்போனென்ட்டுகளுக்கான ஒரு அடிப்படை கிளாஸ் ஆகும், இது ப்ராப்ஸ் மற்றும் ஸ்டேட்டின் ஒரு மேலோட்டமான ஒப்பீட்டைச் செய்ய `shouldComponentUpdate`-ஐ தானாகவே செயல்படுத்துகிறது. இது கிளாஸ் காம்போனென்ட்டுகளுக்கு தேவையற்ற மீண்டும் ரெண்டர்களைத் தடுக்கலாம். `PureComponent`-ஐ செயல்படுத்துவது கிளாஸ் காம்போனென்ட்டுகளில் தேவையற்ற மீண்டும் ரெண்டர்களைக் குறைக்கிறது.

எடுத்துக்காட்டு:

            import React, { PureComponent } from 'react';

class MyComponent extends PureComponent {
  render() {
    console.log('Rendering MyComponent');
    return (
      <div>
        <p>Prop 1: {this.props.prop1}</p>
        <p>Prop 2: {this.props.prop2}</p>
      </div>
    );
  }
}

export default MyComponent;
            

              
                Copy
              
            
          

`React.memo` மற்றும் `PureComponent` இரண்டும் ப்ராப்ஸ்களின் மேலோட்டமான ஒப்பீட்டை நம்பியுள்ளன. இதன் பொருள், ப்ராப்ஸ் ஆப்ஜெக்ட்கள் அல்லது அரேக்களாக இருந்தால், அந்த ஆப்ஜெக்ட்கள் அல்லது அரேக்களுக்குள் ஏற்படும் மாற்றம், ஆப்ஜெக்ட் அல்லது அரேவின் ரெஃபரன்ஸ் மாறாத வரை மீண்டும் ரெண்டரைத் தூண்டாது. சிக்கலான ஆப்ஜெக்ட்களுக்கு, `React.memo`-வின் இரண்டாவது ஆர்குமென்ட் அல்லது ஒரு தனிப்பயன் `shouldComponentUpdate` செயலாக்கத்தைப் பயன்படுத்தி தனிப்பயன் ஒப்பீட்டு லாஜிக் தேவைப்படலாம்.

2. ப்ராப் அப்டேட்களை மேம்படுத்துதல்

ப்ராப்ஸ் திறமையாகப் புதுப்பிக்கப்படுவதை உறுதிசெய்யவும். தேவையற்ற ப்ராப்ஸ்களை சைல்ட் காம்போனென்ட்டுகளுக்கு அனுப்புவதைத் தவிர்க்கவும். ப்ராப் மதிப்புகள் பெற்றோர் காம்போனென்ட்டிற்குள் உருவாக்கப்படும்போது மீண்டும் ரெண்டர்களைத் தடுக்க `useMemo` அல்லது `useCallback` ஐப் பயன்படுத்தி ப்ராப் மதிப்புகளை மெமோயிஸ் செய்வதைக் கவனியுங்கள். ப்ராப் புதுப்பிப்புகளை மேம்படுத்துவது செயல்திறனுக்கு முக்கியமானது.

எடுத்துக்காட்டு:

            import React, { useMemo } from 'react';

function ParentComponent() {
  const data = useMemo(() => ({
    value: 'some data'
  }), []); // Memoize the data object

  return <ChildComponent data={data} />;
}

            

              
                Copy
              
            
          

3. கோட் ஸ்ப்ளிட்டிங் மற்றும் லேஸி லோடிங்

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

எடுத்துக்காட்டு:

            import React, { lazy, Suspense } from 'react';

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

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

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டு `MyComponent`-ஐ சோம்பேறித்தனமாக ஏற்றுவதற்கு `React.lazy` மற்றும் `Suspense`-ஐப் பயன்படுத்துகிறது. `fallback` ப்ராப் காம்போனென்ட் ஏற்றப்படும்போது ஒரு UI ஐ வழங்குகிறது. இந்த நுட்பம் முக்கியமானதல்லாத காம்போனென்ட்டுகளின் ஏற்றுதலை அவை தேவைப்படும் வரை தாமதப்படுத்துவதன் மூலம் ஆரம்ப ஏற்றுதல் நேரத்தை கணிசமாகக் குறைக்கிறது.

4. விர்ச்சுவலைசேஷன்

விர்ச்சுவலைசேஷன் என்பது ஒரு பெரிய பட்டியலில் தெரியும் உருப்படிகளை மட்டும் ரெண்டர் செய்யப் பயன்படுத்தப்படும் ஒரு நுட்பமாகும். இது DOM முனைகளின் எண்ணிக்கையை கணிசமாகக் குறைக்கிறது, மேலும் செயல்திறனைப் பெருமளவில் மேம்படுத்தும், குறிப்பாக பெரிய தரவுப் பட்டியல்களைக் காண்பிக்கும்போது. பெரிய பட்டியல்களுக்கு விர்ச்சுவலைசேஷன் செயல்திறனைப் பெரிதும் மேம்படுத்தும். `react-window` அல்லது `react-virtualized` போன்ற லைப்ரரிகள் இந்த நோக்கத்திற்காக பயனுள்ளதாக இருக்கும்.

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

5. இன்லைன் ஃபங்ஷன்கள் மற்றும் ஆப்ஜெக்ட்களைத் தவிர்த்தல்

ரெண்டர் முறைக்குள் அல்லது ஃபங்ஷனல் காம்போனென்ட்டுகளுக்குள் இன்லைன் ஃபங்ஷன்கள் மற்றும் ஆப்ஜெக்ட்களை உருவாக்குவதைத் தவிர்க்கவும். இவை ஒவ்வொரு ரெண்டரிலும் புதிய ரெஃபரன்ஸ்களை உருவாக்கும், இது சைல்ட் காம்போனென்ட்டுகளின் தேவையற்ற மீண்டும் ரெண்டர்களுக்கு வழிவகுக்கும். ஒவ்வொரு ரெண்டரிலும் புதிய ஆப்ஜெக்ட்கள் அல்லது ஃபங்ஷன்களை உருவாக்குவது மீண்டும் ரெண்டர்களைத் தூண்டுகிறது. இதைத் தவிர்க்க `useCallback` மற்றும் `useMemo` ஐப் பயன்படுத்தவும்.

எடுத்துக்காட்டு:

            // Incorrect
function MyComponent() {
  return <ChildComponent onClick={() => console.log('Clicked')} />;
}

// Correct
function MyComponent() {
  const handleClick = useCallback(() => console.log('Clicked'), []);
  return <ChildComponent onClick={handleClick} />;
}

            

              
                Copy
              
            
          

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

6. கான்டெக்ஸ்ட் அப்டேட்களை மேம்படுத்துதல்

கான்டெக்ஸ்ட் அதன் மதிப்பு மாறும்போது அனைத்து நுகர்வோர்களிலும் மீண்டும் ரெண்டர்களைத் தூண்டலாம். தேவையற்ற மீண்டும் ரெண்டர்களைத் தடுக்க கான்டெக்ஸ்ட் புதுப்பிப்புகளின் கவனமான மேலாண்மை முக்கியமானது. கான்டெக்ஸ்ட் புதுப்பிப்புகளை மேம்படுத்த `useReducer` ஐப் பயன்படுத்துவதைக் கருத்தில் கொள்ளவும் அல்லது கான்டெக்ஸ்ட் மதிப்பை மெமோயிஸ் செய்யவும். செயலி நிலையை நிர்வகிப்பதற்கு கான்டெக்ஸ்ட் புதுப்பிப்புகளை மேம்படுத்துவது அவசியம்.

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

7. டிபவுன்சிங் மற்றும் த்ராட்லிங்

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

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

8. `shouldComponentUpdate`-ஐ (கிளாஸ் காம்போனென்ட்டுகளுக்கு) கவனமாகப் பயன்படுத்துதல்

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

உலகளாவிய எடுத்துக்காட்டுகள் மற்றும் கருத்தில் கொள்ள வேண்டியவை

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

1. இணைய இணைப்பு

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

2. சாதனத் திறன்கள்

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

3. உள்ளூர்மயமாக்கல் மற்றும் சர்வதேசமயமாக்கல் (L10n மற்றும் i18n)

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

4. நேர மண்டலங்கள்

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

5. நாணயம் மற்றும் கட்டண நுழைவாயில்கள்

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

முடிவுரை

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

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