React-இன் experimental_useRefresh பற்றிய ஆழமான பார்வை: ஒரு உலகளாவிய செயல்திறன் பகுப்பாய்வு

தொடர்ந்து வளர்ந்து வரும் ஃப்ரண்ட்எண்ட் மேம்பாட்டு உலகில், ஒரு தடையற்ற டெவலப்பர் அனுபவத்தை (DX) அடைவதற்கான முயற்சி, உகந்த பயன்பாட்டு செயல்திறனைத் தேடுவதைப் போலவே முக்கியமானது. React சுற்றுச்சூழல் அமைப்பில் உள்ள டெவலப்பர்களுக்கு, சமீபத்திய ஆண்டுகளில் ஏற்பட்ட மிக முக்கியமான DX மேம்பாடுகளில் ஒன்று ஃபாஸ்ட் ரெஃப்ரெஷ் (Fast Refresh) அறிமுகப்படுத்தப்பட்டது. இந்த தொழில்நுட்பம், காம்போனென்ட் நிலையை (state) இழக்காமல் குறியீடு மாற்றங்களுக்கு கிட்டத்தட்ட உடனடிப் பின்னூட்டத்தை அனுமதிக்கிறது. ஆனால் இந்த அம்சத்தின் பின்னணியில் உள்ள மாயம் என்ன, அது மறைக்கப்பட்ட செயல்திறன் செலவுடன் வருகிறதா? பதில் ஒரு சோதனை API-க்குள் ஆழமாக உள்ளது: experimental_useRefresh.

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

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

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

ஒரு சுருக்கமான வரலாறு: ஹாட் மாட்யூல் ரீப்ளேஸ்மெண்ட் (HMR)

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

இது ஒரு மிகப்பெரிய முன்னேற்றமாக இருந்தபோதிலும், React உலகில் HMR-க்கு அதன் வரம்புகள் இருந்தன:

• நிலை இழப்பு: HMR பெரும்பாலும் கிளாஸ் காம்போனென்ட்கள் மற்றும் ஹூக்குகளுடன் சிரமப்பட்டது. ஒரு காம்போனென்ட் கோப்பில் ஏற்படும் மாற்றம் பொதுவாக அந்தக் காம்போனென்ட் மீண்டும் மவுண்ட் செய்யப்பட காரணமாகும், அதன் உள்ளூர் நிலையை (local state) அழித்துவிடும். இது இடையூறாக இருந்தது, டெவலப்பர்கள் தங்கள் மாற்றங்களைச் சோதிக்க UI நிலைகளை மீண்டும் கைமுறையாக உருவாக்க வேண்டிய கட்டாயத்தில் இருந்தனர்.
• உறுதியற்ற தன்மை: அமைப்பு நிலையற்றதாக இருக்கலாம். சில நேரங்களில், ஒரு ஹாட் அப்டேட்டின் போது ஏற்படும் பிழை, பயன்பாட்டை ஒரு உடைந்த நிலைக்குத் தள்ளிவிடும், இது எப்படியும் கைமுறையாக ஒரு ரெஃப்ரெஷ் செய்ய வேண்டிய அவசியத்தை ஏற்படுத்தும்.
• கட்டமைப்பு சிக்கல்: HMR-ஐ சரியாக ஒருங்கிணைக்க பெரும்பாலும் குறிப்பிட்ட பாய்லர்ப்ளேட் குறியீடு மற்றும் Webpack போன்ற கருவிகளுக்குள் கவனமான கட்டமைப்பு தேவைப்பட்டது.

பரிணாமம்: React ஃபாஸ்ட் ரெஃப்ரெஷின் மேதைத்தனம்

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

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

இயந்திர அறை: `experimental_useRefresh` என்றால் என்ன?

ஆக, ஃபாஸ்ட் ரெஃப்ரெஷ் இதை எப்படி அடைகிறது? இது ஒரு கீழ்நிலை, ஏற்றுமதி செய்யப்படாத React ஹூக் மூலம் இயக்கப்படுகிறது: experimental_useRefresh. இந்த API-இன் சோதனை தன்மையை வலியுறுத்துவது முக்கியம். இது பயன்பாட்டுக் குறியீட்டில் நேரடியாகப் பயன்படுத்தப்படுவதற்காக அல்ல. மாறாக, இது Next.js, Gatsby, மற்றும் Vite போன்ற பண்ட்லர்கள் மற்றும் கட்டமைப்புகளுக்கான ஒரு ಮೂಲமாக செயல்படுகிறது.

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

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

முக்கியக் கேள்வி: செயல்திறன் தாக்கம் மற்றும் ஓவர்ஹெட்

திரைக்குப் பின்னால் செயல்படும் எந்தவொரு சக்திவாய்ந்த கருவியிலும், செயல்திறன் ஒரு இயல்பான கவலையாகும். ஃபாஸ்ட் ரெஃப்ரெஷின் தொடர்ச்சியான கவனிப்பு மற்றும் செயலாக்கம் நமது மேம்பாட்டுச் சூழலை மெதுவாக்குகிறதா? ஒரு ஒற்றை ரெஃப்ரெஷின் உண்மையான ஓவர்ஹெட் என்ன?

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

ஃபாஸ்ட் ரெஃப்ரெஷ் மற்றும் experimental_useRefresh உங்கள் உற்பத்தி பில்டில் பூஜ்ஜிய தாக்கத்தை ஏற்படுத்துகின்றன.

இந்த முழு பொறிமுறையும் ஒரு மேம்பாட்டு-மட்டும் அம்சமாகும். நவீன பில்ட் கருவிகள் உற்பத்தி பண்டலை உருவாக்கும்போது ஃபாஸ்ட் ரெஃப்ரெஷ் இயக்க நேரம் மற்றும் தொடர்புடைய அனைத்து குறியீட்டையும் முழுமையாக அகற்றுவதற்காக கட்டமைக்கப்பட்டுள்ளன. உங்கள் இறுதிப் பயனர்கள் இந்தக் குறியீட்டை ஒருபோதும் பதிவிறக்கவோ அல்லது இயக்கவோ மாட்டார்கள். நாம் விவாதிக்கும் செயல்திறன் தாக்கம் மேம்பாட்டுச் செயல்பாட்டின் போது டெவலப்பரின் கணினியில் பிரத்தியேகமாக περιορισμένο.

"ரெஃப்ரெஷ் ஓவர்ஹெட்"-ஐ வரையறுத்தல்

நாம் "ஓவர்ஹெட்" பற்றிப் பேசும்போது, பல சாத்தியமான செலவுகளைக் குறிப்பிடுகிறோம்:

• பண்டல் அளவு: ஃபாஸ்ட் ரெஃப்ரெஷை இயக்க டெவலப்மெண்ட் சர்வரின் பண்டலில் சேர்க்கப்பட்ட கூடுதல் குறியீடு.
• CPU/நினைவகம்: இயக்க நேரம் புதுப்பிப்புகளைக் கவனித்து அவற்றைச் செயலாக்கும்போது நுகரப்படும் வளங்கள்.
• செயற்பாட்டு தாமதம் (Latency): ஒரு கோப்பைச் சேமிப்பதற்கும் உலாவியில் மாற்றம் பிரதிபலிப்பதற்கும் இடையில் geçen நேரம்.

ஆரம்ப பண்டல் அளவு தாக்கம் (மேம்பாடு மட்டும்)

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

CPU மற்றும் நினைவக நுகர்வு: மூன்று காட்சிகளின் கதை

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

காட்சி 1: சிறந்த நிலை - ஒரு சிறிய, தனிமைப்படுத்தப்பட்ட காம்போனென்ட் மாற்றம்

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

என்ன நடக்கிறது:

1. நீங்கள் `Button.js` கோப்பைச் சேமிக்கிறீர்கள்.
2. பண்ட்லரின் கோப்பு கண்காணிப்பாளர் மாற்றத்தைக் கண்டறிகிறது.
3. பண்ட்லர் உலாவியில் உள்ள ஃபாஸ்ட் ரெஃப்ரெஷ் இயக்க நேரத்திற்கு ஒரு சிக்னலை அனுப்புகிறது.
4. இயக்க நேரம் புதிய `Button.js` மாட்யூலைப் பெறுகிறது.
5. `Button` காம்போனென்டின் குறியீடு மட்டுமே மாறியுள்ளது என்பதை அது அடையாளம் காண்கிறது.
6. experimental_useRefresh பொறிமுறையைப் பயன்படுத்தி, அது `Button` காம்போனென்டின் ஒவ்வொரு நிகழ்வையும் புதுப்பிக்குமாறு React-க்குக் கூறுகிறது.
7. React அந்தக் குறிப்பிட்ட காம்போனென்ட்களுக்கு ஒரு மறு-ரெண்டரைத் திட்டமிடுகிறது, அவற்றின் நிலை மற்றும் ப்ராப்ஸ்களைப் பாதுகாக்கிறது.

செயல்திறன் தாக்கம்: மிகவும் குறைவு. செயல்முறை நம்பமுடியாத அளவிற்கு வேகமானது மற்றும் திறமையானது. CPU ஸ்பைக் மிகக் குறைவு மற்றும் சில மில்லி விநாடிகளுக்கு மட்டுமே நீடிக்கும். இதுதான் ஃபாஸ்ட் ரெஃப்ரெஷின் மாயாஜாலம் மற்றும் அன்றாட மாற்றங்களின் பெரும்பான்மையைப் பிரதிபலிக்கிறது.

காட்சி 2: சிற்றலை விளைவு - பகிரப்பட்ட தர்க்கத்தை மாற்றுதல்

இப்போது, உங்கள் பயன்பாடு முழுவதும் பத்து வெவ்வேறு காம்போனென்ட்களால் (`ProfilePage`, `Header`, `UserAvatar`, முதலியன) இறக்குமதி செய்யப்பட்டுப் பயன்படுத்தப்படும் ஒரு தனிப்பயன் ஹூக், `useUserData`-ஐ நீங்கள் திருத்துவதாகக் கொள்வோம்.

என்ன நடக்கிறது:

1. நீங்கள் `useUserData.js` கோப்பைச் சேமிக்கிறீர்கள்.
2. செயல்முறை முன்பு போலவே தொடங்குகிறது, ஆனால் ஒரு காம்போனென்ட் அல்லாத மாட்யூல் (ஹூக்) மாறியுள்ளதை இயக்க நேரம் அடையாளம் காண்கிறது.
3. ஃபாஸ்ட் ரெஃப்ரெஷ் பின்னர் புத்திசாலித்தனமாக மாட்யூல் சார்பு வரைபடத்தை ஆராய்கிறது. அது `useUserData`-ஐ இறக்குமதி செய்து பயன்படுத்தும் அனைத்து காம்போனென்ட்களையும் கண்டறிகிறது.
4. பின்னர் அது அந்தப் பத்து காம்போனென்ட்களுக்கும் ஒரு ரெஃப்ரெஷைத் தூண்டுகிறது.

செயல்திறன் தாக்கம்: மிதமானது. ஓவர்ஹெட் இப்போது பாதிக்கப்பட்ட காம்போனென்ட்களின் எண்ணிக்கையால் பெருக்கப்படுகிறது. React UI-இன் அதிகப் பகுதியை மீண்டும் ரெண்டர் செய்ய வேண்டியிருப்பதால், சற்று பெரிய CPU ஸ்பைக் மற்றும் சற்று நீண்ட தாமதத்தை (ஒருவேளை பத்துகள் மில்லி விநாடிகள்) நீங்கள் காண்பீர்கள். முக்கியமாக, இருப்பினும், பயன்பாட்டில் உள்ள மற்ற அனைத்து காம்போனென்ட்களின் நிலையும் தொடப்படாமல் உள்ளது. இது இன்னும் ஒரு முழுப் பக்க ரீலோடை விட மிகச் சிறந்தது.

காட்சி 3: பின்னடைவு - ஃபாஸ்ட் ரெஃப்ரெஷ் கைவிடும்போது

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

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

என்ன நடக்கிறது:

1. இந்த "புதுப்பிக்க முடியாத" மாற்றங்களில் ஒன்றைக் கொண்ட ஒரு கோப்பை நீங்கள் சேமிக்கிறீர்கள்.
2. ஃபாஸ்ட் ரெஃப்ரெஷ் இயக்க நேரம் மாற்றத்தைக் கண்டறிந்து, அது பாதுகாப்பாக ஒரு ஹாட் அப்டேட்டைச் செய்ய முடியாது என்று தீர்மானிக்கிறது.
3. கடைசி முயற்சியாக, அது கைவிட்டு, நீங்கள் F5 அல்லது Cmd+R அழுத்தியது போலவே ஒரு முழுப் பக்க ரீலோடைத் தூண்டுகிறது.

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

ஒரு உலகளாவிய டெவலப்பர் குழுவிற்கான நடைமுறை அளவீடு மற்றும் சுயவிவரப்படுத்தல்

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

வர்த்தகக் கருவிகள்

• உலாவி டெவலப்பர் கருவிகள் (செயல்திறன் தாவல்): Chrome, Firefox, அல்லது Edge-இல் உள்ள செயல்திறன் சுயவிவரப்படுத்தி உங்கள் சிறந்த நண்பன். இது ஸ்கிரிப்டிங், ரெண்டரிங், மற்றும் பெயிண்டிங் உட்பட அனைத்து செயல்பாடுகளையும் பதிவு செய்ய முடியும், இது ரெஃப்ரெஷ் செயல்முறையின் ஒரு விரிவான "சுடர் வரைபடத்தை" உருவாக்க உங்களை அனுமதிக்கிறது.
• React டெவலப்பர் கருவிகள் (சுயவிவரப்படுத்தி): உங்கள் காம்போனென்ட்கள் ஏன் மீண்டும் ரெண்டர் செய்யப்பட்டன என்பதைப் புரிந்துகொள்ள இந்த நீட்டிப்பு அவசியம். இது ஒரு ஃபாஸ்ட் ரெஃப்ரெஷின் ஒரு பகுதியாக எந்த காம்போனென்ட்கள் புதுப்பிக்கப்பட்டன மற்றும் ரெண்டரைத் தூண்டியது எது என்பதை துல்லியமாகக் காண்பிக்கும்.

ஒரு படிப்படியான சுயவிவரப்படுத்தல் வழிகாட்டி

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

1. ஒரு எளிய திட்டத்தை அமைக்கவும்

Vite அல்லது Create React App போன்ற ஒரு நவீன கருவித்தொகுப்பைப் பயன்படுத்தி ஒரு புதிய React திட்டத்தை உருவாக்கவும். இவை பெட்டிக்கு வெளியே ஃபாஸ்ட் ரெஃப்ரெஷ் கட்டமைக்கப்பட்டே வருகின்றன. npx create-vite@latest my-react-app --template react

2. ஒரு எளிய காம்போனென்ட் ரெஃப்ரெஷை சுயவிவரப்படுத்தவும்

• உங்கள் டெவலப்மெண்ட் சர்வரை இயக்கவும் மற்றும் உங்கள் உலாவியில் பயன்பாட்டைத் திறக்கவும்.
• டெவலப்பர் கருவிகளைத் திறந்து செயல்திறன் தாவலுக்குச் செல்லவும்.
• "பதிவு" பொத்தானைக் கிளிக் செய்யவும் (சிறிய வட்டம்).
• உங்கள் குறியீடு எடிட்டருக்குச் சென்று, உங்கள் முக்கிய `App` காம்போனென்டில் சில உரையை மாற்றுவது போன்ற ஒரு சிறிய மாற்றத்தைச் செய்யவும். கோப்பைச் சேமிக்கவும்.
• உலாவியில் மாற்றம் தோன்றும் வரை காத்திருக்கவும்.
• டெவலப்பர் கருவிகளுக்குத் திரும்பிச் சென்று "நிறுத்து" என்பதைக் கிளிக் செய்யவும்.

நீங்கள் இப்போது ஒரு விரிவான சுடர் வரைபடத்தைக் காண்பீர்கள். நீங்கள் கோப்பைச் சேமித்த நேரத்திற்குப் பொருந்தக்கூடிய ஒரு செறிவான செயல்பாட்டுக் கொத்தைத் தேடுங்கள். உங்கள் பண்ட்லர் தொடர்பான செயல்பாட்டு அழைப்புகளை (எ.கா., `vite-runtime`) தொடர்ந்து, React-இன் ஷெட்யூலர் மற்றும் ரெண்டர் கட்டங்களை (`performConcurrentWorkOnRoot`) நீங்கள் காண்பீர்கள். இந்தக் கொத்தின் மொத்த கால அளவு உங்கள் ரெஃப்ரெஷ் ஓவர்ஹெட் ஆகும். ஒரு எளிய மாற்றத்திற்கு, இது 50 மில்லி விநாடிகளுக்குக் குறைவாக இருக்க வேண்டும்.

3. ஒரு ஹூக்-இயக்கப்படும் ரெஃப்ரெஷை சுயவிவரப்படுத்தவும்

இப்போது, ஒரு தனி கோப்பில் ஒரு தனிப்பயன் ஹூக்கை உருவாக்கவும்:

கோப்பு: `useCounter.js` import { useState } from 'react'; export function useCounter() { const [count, setCount] = useState(0); const increment = () => setCount(c => c + 1); return { count, increment }; }

இந்த ஹூக்கை இரண்டு அல்லது மூன்று வெவ்வேறு காம்போனென்ட்களில் பயன்படுத்தவும். இப்போது, சுயவிவரப்படுத்தல் செயல்முறையை மீண்டும் செய்யவும், ஆனால் இந்த முறை, `useCounter.js`-க்குள் ஒரு மாற்றத்தைச் செய்யவும் (எ.கா., ஒரு `console.log`-ஐச் சேர்க்கவும்). நீங்கள் சுடர் வரைபடத்தை பகுப்பாய்வு செய்யும்போது, ஒரு பரந்த செயல்பாட்டுப் பகுதியைக் காண்பீர்கள், ஏனெனில் React இந்த ஹூக்கைப் பயன்படுத்தும் அனைத்து காம்போனென்ட்களையும் மீண்டும் ரெண்டர் செய்ய வேண்டும். அதிகரித்த ஓவர்ஹெட்டைக் கணக்கிட இந்த பணியின் கால அளவை முந்தையதுடன் ஒப்பிடவும்.

மேம்பாட்டிற்கான சிறந்த நடைமுறைகள் மற்றும் உகப்பாக்கம்

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

சிறந்த ரெஃப்ரெஷ் செயல்திறனுக்காக காம்போனென்ட்களை கட்டமைத்தல்

ஒரு நன்கு கட்டமைக்கப்பட்ட, செயல்திறன்மிக்க React பயன்பாட்டிற்கு வழிவகுக்கும் கொள்கைகள் ஒரு சிறந்த ஃபாஸ்ட் ரெஃப்ரெஷ் அனுபவத்திற்கும் வழிவகுக்கும்.

• காம்போனென்ட்களை சிறியதாகவும் கவனம் செலுத்துவதாகவும் வைத்திருங்கள்: ஒரு சிறிய காம்போனென்ட் மீண்டும் ரெண்டர் செய்யும்போது குறைவான வேலையைச் செய்கிறது. நீங்கள் ஒரு சிறிய காம்போனென்டைத் திருத்தும்போது, ரெஃப்ரெஷ் மின்னல் வேகத்தில் இருக்கும். பெரிய, ஒற்றைக் காம்போனென்ட்கள் மீண்டும் ரெண்டர் செய்ய மெதுவாக இருக்கும் மற்றும் ரெஃப்ரெஷ் ஓவர்ஹெட்டை அதிகரிக்கும்.
• நிலையை ஓரிடத்தில் வைத்திருங்கள்: நிலையைத் தேவைப்படும் அளவிற்கு மட்டுமே உயர்த்தவும். நிலை காம்போனென்ட் மரத்தின் ஒரு சிறிய பகுதிக்கு உள்ளூர் என்றால், அந்த மரத்திற்குள் எந்த மாற்றங்களும் மேலே தேவையற்ற ரெஃப்ரெஷ்களைத் தூண்டாது. இது உங்கள் மாற்றங்களின் வெடிப்பு ஆரம் περιορίζει.

"ஃபாஸ்ட் ரெஃப்ரெஷ் நட்பு" குறியீட்டை எழுதுதல்

உங்கள் குறியீட்டின் நோக்கத்தை ஃபாஸ்ட் ரெஃப்ரெஷ் புரிந்துகொள்ள உதவுவதே முக்கியம்.

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

எதிர்காலம்: 'சோதனை' குறிச்சொல்லுக்கு அப்பால்

experimental_useRefresh ஹூக், React-இன் DX-க்கான அர்ப்பணிப்புக்கு ஒரு சான்றாகும். இது ஒரு உள், சோதனை API-ஆக இருக்கலாம், ஆனால் அது உள்ளடக்கிய கருத்துக்கள் React-இன் எதிர்காலத்திற்கு மையமானவை.

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

முடிவுரை: ஒரு உலகளாவிய சமூகத்திற்கான ஒரு சக்திவாய்ந்த கருவி

நமது ஆழமான பார்வையை உலகளாவிய React டெவலப்பர் சமூகத்திற்கான சில முக்கிய பாடங்களாக வடிப்போம்.

• ஒரு DX கேம்-சேஞ்சர்: experimental_useRefresh என்பது React ஃபாஸ்ட் ரெஃப்ரெஷை இயக்கும் கீழ்நிலை இயந்திரமாகும், இது குறியீடு திருத்தங்களின் போது காம்போனென்ட் நிலையைப் பாதுகாப்பதன் மூலம் டெவலப்பர் பின்னூட்ட வளையத்தை வியத்தகு முறையில் மேம்படுத்துகிறது.
• பூஜ்ஜிய உற்பத்தி தாக்கம்: இந்த பொறிமுறையின் செயல்திறன் ஓவர்ஹெட் கண்டிப்பாக ஒரு மேம்பாட்டு நேரக் கவலையாகும். இது உற்பத்தி பில்டுகளிலிருந்து முற்றிலுமாக அகற்றப்படுகிறது மற்றும் உங்கள் இறுதிப் பயனர்கள் மீது எந்த விளைவையும் ஏற்படுத்தாது.
• விகிதாசார ஓவர்ஹெட்: மேம்பாட்டில், ஒரு ரெஃப்ரெஷின் செயல்திறன் செலவு குறியீடு மாற்றத்தின் நோக்கத்திற்கு நேரடியாக விகிதாசாரமாகும். சிறிய, தனிமைப்படுத்தப்பட்ட மாற்றங்கள் கிட்டத்தட்ட உடனடியானவை, அதே நேரத்தில் பரவலாகப் பயன்படுத்தப்படும் பகிரப்பட்ட தர்க்கத்தில் ஏற்படும் மாற்றங்கள் ஒரு பெரிய, ஆனாலும் நிர்வகிக்கக்கூடிய, தாக்கத்தைக் கொண்டுள்ளன.
• கட்டமைப்பு முக்கியம்: நல்ல React கட்டமைப்பு—சிறிய காம்போனென்ட்கள், நன்கு நிர்வகிக்கப்பட்ட நிலை—உங்கள் பயன்பாட்டின் உற்பத்தி செயல்திறனை மேம்படுத்துவதோடு மட்டுமல்லாமல், ஃபாஸ்ட் ரெஃப்ரெஷை மிகவும் திறமையானதாக மாற்றுவதன் மூலம் உங்கள் மேம்பாட்டு அனுபவத்தையும் மேம்படுத்துகிறது.

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