ரியாக்ட் ஃபைபர் கட்டமைப்பு: சரிசெய்தல் செயல்முறையைப் புரிந்துகொள்ளுதல்

ரியாக்ட் தனது கூறு-அடிப்படையிலான கட்டமைப்பு மற்றும் அறிவிப்பு நிரலாக்க மாதிரி மூலம் ஃபிரண்ட்-எண்ட் டெவலப்மென்ட்டில் ஒரு புரட்சியை ஏற்படுத்தியுள்ளது. ரியாக்டின் செயல்திறனின் மையத்தில் அதன் சரிசெய்தல் செயல்முறை (reconciliation process) உள்ளது – இது கூறு மரத்தில் (component tree) ஏற்படும் மாற்றங்களை பிரதிபலிக்க உண்மையான DOM-ஐ ரியாக்ட் புதுப்பிக்கும் வழிமுறையாகும். இந்த செயல்முறை ஃபைபர் கட்டமைப்பில் முடிவடையும் ஒரு குறிப்பிடத்தக்க பரிணாம வளர்ச்சிக்கு உள்ளாகியுள்ளது. இந்த கட்டுரை ரியாக்ட் ஃபைபர் மற்றும் சரிசெய்தல் மீதான அதன் தாக்கம் பற்றிய ஒரு விரிவான புரிதலை வழங்குகிறது.

சரிசெய்தல் (Reconciliation) என்றால் என்ன?

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

சரிசெய்தல் செயல்முறை இரண்டு முக்கிய அனுமானங்களால் வழிநடத்தப்படுகிறது:

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

பாரம்பரிய சரிசெய்தல் (ஃபைபருக்கு முன்பு)

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

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

ரியாக்ட் ஃபைபரின் அறிமுகம்

ரியாக்ட் ஃபைபர் என்பது ரியாக்டின் சரிசெய்தல் அல்காரிதத்தின் ஒரு முழுமையான மாற்றி எழுதும் முறையாகும், இது ரியாக்ட் 16-இல் அறிமுகப்படுத்தப்பட்டது. இதன் முதன்மை நோக்கம் ரியாக்ட் பயன்பாடுகளின் பதிலளிப்புத் திறன் மற்றும் உணரப்பட்ட செயல்திறனை மேம்படுத்துவதாகும், குறிப்பாக சிக்கலான சூழ்நிலைகளில். ஃபைபர், சரிசெய்தல் செயல்முறையை சிறிய, குறுக்கிடக்கூடிய வேலை அலகுகளாக (units of work) உடைப்பதன் மூலம் இதை அடைகிறது.

ரியாக்ட் ஃபைபரின் பின்னணியில் உள்ள முக்கிய கருத்துக்கள்:

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

ஃபைபர் கட்டமைப்பின் நன்மைகள்

ஃபைபர் கட்டமைப்பு பல குறிப்பிடத்தக்க நன்மைகளை வழங்குகிறது:

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

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

ஃபைபர் கட்டமைப்பைப் புரிந்துகொள்ளுதல்

ஒவ்வொரு ரியாக்ட் கூறும் ஒரு ஃபைபர் நோட் (Fiber node) மூலம் குறிப்பிடப்படுகிறது. ஃபைபர் நோட் கூறின் வகை, ப்ராப்ஸ், நிலை மற்றும் மரத்தில் உள்ள மற்ற ஃபைபர் நோட்களுடனான அதன் உறவுகள் பற்றிய தகவல்களைக் கொண்டுள்ளது. ஒரு ஃபைபர் நோடின் சில முக்கியமான பண்புகள் இங்கே:

• type: கூறின் வகை (எ.கா., ஒரு ஃபங்ஷன் கூறு, ஒரு கிளாஸ் கூறு, ஒரு DOM உறுப்பு).
• key: கூறுக்கு அனுப்பப்பட்ட key ப்ராப்.
• props: கூறுக்கு அனுப்பப்பட்ட ப்ராப்ஸ்.
• stateNode: கூறின் நிகழ்வு (கிளாஸ் கூறுகளுக்கு) அல்லது null (ஃபங்ஷன் கூறுகளுக்கு).
• child: முதல் குழந்தை ஃபைபர் நோடுக்கான ஒரு சுட்டி.
• sibling: அடுத்த உடன்பிறப்பு ஃபைபர் நோடுக்கான ஒரு சுட்டி.
• return: பெற்றோர் ஃபைபர் நோடுக்கான ஒரு சுட்டி.
• alternate: கூறின் முந்தைய நிலையைக் குறிக்கும் ஃபைபர் நோடுக்கான ஒரு சுட்டி.
• effectTag: DOM-இல் செய்யப்பட வேண்டிய புதுப்பிப்பின் வகையைக் குறிக்கும் ஒரு கொடி.

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

ஒர்க்லூப் (WorkLoop) அல்காரிதம்

ஒர்க்லூப் என்பது ஃபைபர் கட்டமைப்பின் மையமாகும். ஃபைபர் மரத்தை கடந்து சென்று ஒவ்வொரு ஃபைபருக்கும் தேவையான வேலையைச் செய்வதற்கு இது பொறுப்பாகும். ஒர்க்லூப் என்பது ஃபைபர்களை ஒவ்வொன்றாகச் செயலாக்கும் ஒரு ரிகர்சிவ் ஃபங்ஷனாக (recursive function) செயல்படுத்தப்படுகிறது.

ஒர்க்லூப் இரண்டு முக்கிய கட்டங்களைக் கொண்டுள்ளது:

• ரெண்டர் கட்டம் (The Render Phase): ரெண்டர் கட்டத்தின் போது, ரியாக்ட் ஃபைபர் மரத்தைக் கடந்து சென்று DOM-இல் செய்யப்பட வேண்டிய மாற்றங்களைத் தீர்மானிக்கிறது. இந்த கட்டம் குறுக்கிடக்கூடியது, அதாவது ரியாக்ட் இதை எந்த நேரத்திலும் இடைநிறுத்தி மீண்டும் தொடங்கலாம்.
• கமிட் கட்டம் (The Commit Phase): கமிட் கட்டத்தின் போது, ரியாக்ட் மாற்றங்களை DOM-இல் uygulaக்குகிறது. இந்த கட்டம் குறுக்கிட முடியாதது, அதாவது ரியாக்ட் இதைத் தொடங்கியவுடன் அதை முடிக்க வேண்டும்.

ரெண்டர் கட்டம் விரிவாக

ரெண்டர் கட்டத்தை மேலும் இரண்டு துணை-கட்டங்களாகப் பிரிக்கலாம்:

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

beginWork ஃபங்ஷன் பின்வரும் பணிகளைச் செய்கிறது:

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

completeWork ஃபங்ஷன் பின்வரும் பணிகளைச் செய்கிறது:

1. beginWork ஃபங்ஷனின் போது தீர்மானிக்கப்பட்ட மாற்றங்களுடன் DOM-ஐப் புதுப்பிக்கிறது.
2. கூறின் லேஅவுட்டைக் கணக்கிடுகிறது.
3. கமிட் கட்டத்திற்குப் பிறகு செய்யப்பட வேண்டிய பக்க விளைவுகளை (side effects) சேகரிக்கிறது.

கமிட் கட்டம் விரிவாக

கமிட் கட்டம் மாற்றங்களை DOM-இல் பயன்படுத்துவதற்குப் பொறுப்பாகும். இந்த கட்டம் குறுக்கிட முடியாதது, அதாவது ரியாக்ட் இதைத் தொடங்கியவுடன் அதை முடிக்க வேண்டும். கமிட் கட்டம் மூன்று துணை-கட்டங்களைக் கொண்டுள்ளது:

• beforeMutation: இந்த கட்டம் DOM மாற்றப்படுவதற்கு முன்பு செயல்படுத்தப்படுகிறது. இது புதுப்பிப்புகளுக்காக DOM-ஐத் தயாரிப்பது போன்ற பணிகளைச் செய்யப் பயன்படுகிறது.
• mutation: இந்த கட்டத்தில் தான் உண்மையான DOM மாற்றங்கள் செய்யப்படுகின்றன. ரியாக்ட் ஃபைபர் நோட்களின் effectTag பண்பின் அடிப்படையில் DOM-ஐப் புதுப்பிக்கிறது.
• layout: இந்த கட்டம் DOM மாற்றப்பட்ட பிறகு செயல்படுத்தப்படுகிறது. இது கூறின் லேஅவுட்டைப் புதுப்பித்தல் மற்றும் லைஃப்சைக்கிள் மெத்தட்களை (lifecycle methods) இயக்குதல் போன்ற பணிகளைச் செய்யப் பயன்படுகிறது.

நடைமுறை எடுத்துக்காட்டுகள் மற்றும் குறியீடு துணுக்குகள்

ஃபைபர் சரிசெய்தல் செயல்முறையை ஒரு எளிமைப்படுத்தப்பட்ட எடுத்துக்காட்டுடன் விளக்குவோம். பொருட்களின் பட்டியலைக் காட்டும் ஒரு கூறைக் கருத்தில் கொள்ளுங்கள்:

```javascript function ItemList({ items }) { return (

{items.map(item => (
• {item.name}
))}

); } ```

items ப்ராப் மாறும்போது, ரியாக்ட் பட்டியலை சரிசெய்து அதற்கேற்ப DOM-ஐப் புதுப்பிக்க வேண்டும். ஃபைபர் இதை எப்படி கையாளும் என்பது இங்கே:

1. ரெண்டர் கட்டம்: beginWork ஃபங்ஷன் புதிய items வரிசையை முந்தைய items வரிசையுடன் ஒப்பிடும். எந்தெந்த பொருட்கள் சேர்க்கப்பட்டுள்ளன, நீக்கப்பட்டுள்ளன அல்லது புதுப்பிக்கப்பட்டுள்ளன என்பதை இது அடையாளம் காணும்.
2. சேர்க்கப்பட்ட பொருட்களுக்கு புதிய ஃபைபர் நோட்கள் உருவாக்கப்படும், மேலும் இந்த பொருட்கள் DOM-இல் செருகப்பட வேண்டும் என்பதைக் குறிக்க effectTag அமைக்கப்படும்.
3. நீக்கப்பட்ட பொருட்களுக்கான ஃபைபர் நோட்கள் நீக்கத்திற்காகக் குறிக்கப்படும்.
4. புதுப்பிக்கப்பட்ட பொருட்களுக்கான ஃபைபர் நோட்கள் புதிய தரவுகளுடன் புதுப்பிக்கப்படும்.
5. கமிட் கட்டம்: பின்னர் commit கட்டம் இந்த மாற்றங்களை உண்மையான DOM-இல் பயன்படுத்தும். சேர்க்கப்பட்ட பொருட்கள் செருகப்படும், நீக்கப்பட்ட பொருட்கள் நீக்கப்படும், மற்றும் புதுப்பிக்கப்பட்ட பொருட்கள் மாற்றியமைக்கப்படும்.

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

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

திட்டமிடல் மற்றும் முன்னுரிமைப்படுத்தல்

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

ரியாக்ட் வெவ்வேறு முன்னுரிமைகளுடன் புதுப்பிப்புகளைத் திட்டமிடுவதற்கு பல API-களை வழங்குகிறது:

• React.render: இயல்புநிலை முன்னுரிமையுடன் ஒரு புதுப்பிப்பைத் திட்டமிடுகிறது.
• ReactDOM.unstable_deferredUpdates: குறைந்த முன்னுரிமையுடன் ஒரு புதுப்பிப்பைத் திட்டமிடுகிறது.
• ReactDOM.unstable_runWithPriority: ஒரு புதுப்பிப்பின் முன்னுரிமையை நீங்கள் வெளிப்படையாகக் குறிப்பிட அனுமதிக்கிறது.

உதாரணமாக, அனலிட்டிக்ஸ் கண்காணிப்பு அல்லது பின்னணி தரவு பெறுதல் போன்ற பயனர் அனுபவத்திற்கு முக்கியமில்லாத புதுப்பிப்புகளைத் திட்டமிட நீங்கள் ReactDOM.unstable_deferredUpdates-ஐப் பயன்படுத்தலாம்.

```javascript ReactDOM.unstable_deferredUpdates(() => { // Perform non-critical updates here updateAnalyticsData(); }); ```

ஃபைபருடன் பிழை கையாளுதல்

ஃபைபர் சரிசெய்தல் செயல்முறையின் போது மேம்படுத்தப்பட்ட பிழை கையாளுதலை வழங்குகிறது. ரெண்டரிங்கின் போது ஒரு பிழை ஏற்படும்போது, ரியாக்ட் பிழையைப் பிடித்து முழு பயன்பாடும் செயலிழப்பதைத் தடுக்க முடியும். ரியாக்ட் ஒரு கட்டுப்படுத்தப்பட்ட முறையில் பிழைகளைக் கையாள பிழை எல்லைகளை (error boundaries) பயன்படுத்துகிறது.

ஒரு பிழை எல்லை என்பது அதன் குழந்தை கூறு மரத்தில் (child component tree) எங்கும் ஏற்படும் ஜாவாஸ்கிரிப்ட் பிழைகளைப் பிடித்து, அந்தப் பிழைகளைப் பதிவுசெய்து, செயலிழந்த கூறு மரத்திற்குப் பதிலாக ஒரு பின்னடைவு UI (fallback UI) ஐக் காட்டும் ஒரு கூறாகும். பிழை எல்லைகள் ரெண்டரிங்கின் போது, லைஃப்சைக்கிள் மெத்தட்களில், மற்றும் వాటికి கீழே உள்ள முழு மரத்தின் கன்ஸ்ட்ரக்டர்களிலும் (constructors) பிழைகளைப் பிடிக்கின்றன.

```javascript class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { // Update state so the next render will show the fallback UI. return { hasError: true }; } componentDidCatch(error, errorInfo) { // You can also log the error to an error reporting service logErrorToMyService(error, errorInfo); } render() { if (this.state.hasError) { // You can render any custom fallback UI return

Something went wrong.

; } return this.props.children; } } ```

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

```javascript ```

ஃபைபரை பிழைத்திருத்தம் செய்தல்

ஃபைபரைப் பயன்படுத்தும் ரியாக்ட் பயன்பாடுகளை பிழைத்திருத்தம் செய்வது சவாலானதாக இருக்கலாம், ஆனால் உதவக்கூடிய பல கருவிகள் மற்றும் நுட்பங்கள் உள்ளன. ரியாக்ட் டெவ்டூல்ஸ் (React DevTools) பிரவுசர் நீட்டிப்பு, கூறு மரத்தை ஆய்வு செய்வதற்கும், செயல்திறனை விவரக்குறிப்பதற்கும், மற்றும் பிழைகளைத் திருத்துவதற்கும் ஒரு சக்திவாய்ந்த கருவிகளின் தொகுப்பை வழங்குகிறது.

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

ரியாக்ட் டெவ்டூல்ஸ் ஒவ்வொரு கூறின் ப்ராப்ஸ், நிலை மற்றும் ஃபைபர் நோடை ஆய்வு செய்ய உங்களை அனுமதிக்கும் ஒரு கூறு மரக் காட்சியையும் (component tree view) வழங்குகிறது. கூறு மரம் எவ்வாறு கட்டமைக்கப்பட்டுள்ளது மற்றும் சரிசெய்தல் செயல்முறை எவ்வாறு செயல்படுகிறது என்பதைப் புரிந்துகொள்ள இது உதவியாக இருக்கும்.

முடிவுரை

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

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

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

இதோ சில முக்கிய குறிப்புகள்:

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

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