ரியாக்ட் ஃபைபர்: உலகளாவிய UI சிறப்புக்கான சமரச வழிமுறையின் ஆழமான ஆய்வு

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

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

ரியாக்ட்டின் பரிணாமம்: ஃபைபர் ஏன் அவசியமானது

ஃபைபருக்கு முன்பு, ரியாக்ட்டின் சமரச செயல்முறை (பயன்பாட்டு நிலையில் ஏற்படும் மாற்றங்களை பிரதிபலிக்க DOM-ஐ எவ்வாறு புதுப்பிக்கிறது என்பது) பெரும்பாலும் ஒத்திசைவாக இருந்தது. அது கூறு மரத்தை (component tree) கடந்து, வேறுபாடுகளைக் கணக்கிட்டு, ஒரே, தடையற்ற சுற்றில் புதுப்பிப்புகளைப் பயன்படுத்தியது. சிறிய பயன்பாடுகளுக்கு இது திறமையானதாக இருந்தாலும், பயன்பாடுகள் சிக்கலானதாகவும் மற்றும் ஊடாடும் தேவைகள் அதிகரித்தபோதும் இந்த அணுகுமுறைக்கு குறிப்பிடத்தக்க வரம்புகள் இருந்தன:

• முக்கிய இழையைத் தடுப்பது (Blocking Main Thread): பெரிய அல்லது சிக்கலான புதுப்பிப்புகள் உலாவியின் முக்கிய இழையைத் தடுத்து, UI திணறல், விடுபட்ட பிரேம்கள், மற்றும் ஒரு மந்தமான பயனர் அனுபவத்திற்கு வழிவகுக்கும். ஒரு உலகளாவிய இ-காமர்ஸ் தளம் ஒரு சிக்கலான வடிகட்டி செயல்பாட்டைச் செயலாக்குவதையோ அல்லது ஒரு கூட்டு ஆவண எடிட்டர் கண்டங்கள் முழுவதும் நிகழ்நேர மாற்றங்களை ஒத்திசைப்பதையோ கற்பனை செய்து பாருங்கள்; உறைந்த UI ஏற்றுக்கொள்ள முடியாதது.
• முன்னுரிமை இல்லாமை: அனைத்து புதுப்பிப்புகளும் சமமாகவே கருதப்பட்டன. ஒரு முக்கியமான பயனர் உள்ளீடு (தேடல் பட்டியில் தட்டச்சு செய்வது போன்றவை) ஒரு அறிவிப்பைக் காட்டும் குறைவான அவசர பின்னணி தரவுப் பெறுதலால் தாமதப்படுத்தப்படலாம், இது விரக்திக்கு வழிவகுக்கும்.
• வரையறுக்கப்பட்ட குறுக்கீடுத்திறன்: ஒரு புதுப்பிப்பு தொடங்கியவுடன், அதை இடைநிறுத்தவோ அல்லது மீண்டும் தொடங்கவோ முடியவில்லை. இது நேரப் பகிர்வு (time-slicing) அல்லது அவசர பணிகளுக்கு முன்னுரிமை அளிப்பது போன்ற மேம்பட்ட அம்சங்களைச் செயல்படுத்துவதை கடினமாக்கியது.
• ஒத்திசைவற்ற UI முறைகளில் சிரமம்: தரவுப் பெறுதல் மற்றும் ஏற்றுதல் நிலைகளை அழகாகக் கையாள்வதற்கு சிக்கலான மாற்று வழிகள் தேவைப்பட்டன, இது பெரும்பாலும் நீர்வீழ்ச்சிகள் அல்லது சிறந்ததல்லாத பயனர் ஓட்டங்களுக்கு வழிவகுத்தது.

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

முக்கிய கருத்தைப் புரிந்துகொள்ளுதல்: ஃபைபர் என்றால் என்ன?

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

பணி அலகுகளாக ஃபைபர்கள்

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

ரியாக்ட் ஒரு புதுப்பிப்பைச் செய்ய வேண்டியிருக்கும் போது, அது "வேலை-நடந்துகொண்டிருக்கிறது" மரம் (work-in-progress tree) எனப்படும் ஃபைபர்களின் ஒரு புதிய மரத்தை உருவாக்குகிறது. பின்னர் அது இந்த புதிய மரத்தை தற்போதுள்ள "நடப்பு" மரத்துடன் (current tree) ஒப்பிட்டு, உண்மையான DOM-இல் என்ன மாற்றங்கள் செய்யப்பட வேண்டும் என்பதை அடையாளம் காண்கிறது. இந்த முழு செயல்முறையும் சிறிய, குறுக்கிடக்கூடிய வேலைத் துண்டுகளாகப் பிரிக்கப்பட்டுள்ளது.

புதிய தரவுக் கட்டமைப்பு: இணைக்கப்பட்ட பட்டியல் (Linked List)

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

• child: முதல் குழந்தை ஃபைபரை சுட்டுகிறது.
• sibling: அடுத்த உடன்பிறப்பு ஃபைபரை சுட்டுகிறது.
• return: பெற்றோர் ஃபைபரை ("திரும்பும்" ஃபைபர்) சுட்டுகிறது.

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

ஃபைபர் சமரசத்தின் இரண்டு கட்டங்கள்

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

கட்டம் 1: ரெண்டர்/சமரச கட்டம் (வேலை-நடந்துகொண்டிருக்கிறது மரம்)

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

இந்தக் கட்டத்தின் போது முக்கிய செயல்பாடுகள் பின்வருமாறு:

• ப்ராப்ஸ் மற்றும் ஸ்டேட் புதுப்பித்தல்: ரியாக்ட் ஒவ்வொரு கூறுக்கும் புதிய ப்ராப்ஸ் மற்றும் ஸ்டேட்டைச் செயலாக்குகிறது, getDerivedStateFromProps போன்ற வாழ்க்கைச் சுழற்சி முறைகள் அல்லது செயல்பாட்டுக் கூறுகளின் உடல்களை அழைக்கிறது.
• குழந்தைகளை வேறுபடுத்துதல்: ஒவ்வொரு கூறுக்கும், ரியாக்ட் அதன் தற்போதைய குழந்தைகளை புதிய குழந்தைகளுடன் ஒப்பிட்டு (ரெண்டரிங்கிலிருந்து) என்ன சேர்க்கப்பட வேண்டும், அகற்றப்பட வேண்டும் அல்லது புதுப்பிக்கப்பட வேண்டும் என்பதைத் தீர்மானிக்கிறது. இங்குதான் திறமையான பட்டியல் சமரசத்திற்கு பிரபலமற்ற "key" ப்ராப் இன்றியமையாததாகிறது.
• பக்க விளைவுகளைக் குறித்தல்: உண்மையான DOM மாற்றங்களைச் செய்வதற்கோ அல்லது `componentDidMount`/`Update` ஐ உடனடியாக அழைப்பதற்கோ பதிலாக, ஃபைபர், ஃபைபர் முனைகளை "பக்க விளைவுகளுடன்" (எ.கா., `Placement`, `Update`, `Deletion`) குறிக்கிறது. இந்த விளைவுகள் "விளைவுப் பட்டியல்" அல்லது "புதுப்பிப்பு வரிசை" எனப்படும் ஒரு ஒற்றை இணைக்கப்பட்ட பட்டியலில் சேகரிக்கப்படுகின்றன. இந்த பட்டியல் ரெண்டர் கட்டம் முடிந்த பிறகு நடக்க வேண்டிய அனைத்து DOM செயல்பாடுகள் மற்றும் வாழ்க்கைச் சுழற்சி அழைப்புகளைச் சேமிப்பதற்கான ஒரு இலகுவான வழியாகும்.

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

கட்டம் 2: கமிட் கட்டம் (மாற்றங்களைப் பயன்படுத்துதல்)

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

இந்தக் கட்டத்தின் போது முக்கிய செயல்பாடுகள் பின்வருமாறு:

• DOM மாற்றங்கள்: முந்தைய கட்டத்தில் குறிக்கப்பட்ட `Placement`, `Update`, மற்றும் `Deletion` விளைவுகளின் அடிப்படையில் ரியாக்ட் தேவையான அனைத்து DOM கையாளுதல்களையும் (கூறுகளைச் சேர்த்தல், அகற்றுதல், புதுப்பித்தல்) செய்கிறது.
• வாழ்க்கைச் சுழற்சி முறைகள் & ஹூக்குகள்: `componentDidMount`, `componentDidUpdate`, `componentWillUnmount` (அகற்றல்களுக்கு) போன்ற முறைகள், மற்றும் `useLayoutEffect` கால்பேக்குகள் இங்குதான் அழைக்கப்படுகின்றன. முக்கியமாக, `useEffect` கால்பேக்குகள் உலாவி வரைந்த பிறகு இயங்குவதற்கு திட்டமிடப்பட்டுள்ளன, இது பக்க விளைவுகளைச் செய்ய ஒரு தடுக்காத வழியை வழங்குகிறது.

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

ரியாக்ட் ஃபைபரின் முக்கிய கண்டுபிடிப்புகள்

இரண்டு-கட்ட அணுகுமுறை மற்றும் ஃபைபர் தரவுக் கட்டமைப்பு ஒரு புதிய திறன்களின் செல்வத்தைத் திறக்கின்றன:

ஒருங்கமைவு மற்றும் குறுக்கீடு (நேரப் பகிர்வு)

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

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

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

ஃபைபர் ஒரு வலுவான முன்னுரிமை அமைப்பை அறிமுகப்படுத்துகிறது. வெவ்வேறு வகையான புதுப்பிப்புகளுக்கு வெவ்வேறு முன்னுரிமைகள் ஒதுக்கப்படலாம்:

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

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

பிழை எல்லைகள் (Error Boundaries)

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

சஸ்பென்ஸ் மற்றும் ஒத்திசைவற்ற UI (Suspense and Asynchronous UI)

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

உதாரணமாக, ஒரு உலகளாவிய செய்தி இணையதளத்தை கற்பனை செய்து பாருங்கள். சஸ்பென்ஸுடன், ஒரு `NewsFeed` கூறு அதன் கட்டுரைகள் பெறப்படும் வரை சஸ்பெண்ட் ஆகலாம், ஒரு எலும்புக்கூடு ஏற்றியை (skeleton loader) காட்டும். ஒரு `AdBanner` கூறு அதன் விளம்பர உள்ளடக்கம் ஏற்றப்படும் வரை சஸ்பெண்ட் ஆகலாம், ஒரு பதிலிடும் இடத்தை (placeholder) காட்டும். இவை சுயாதீனமாக ஏற்றப்படலாம், மேலும் பயனர் ஒரு முற்போக்கான, குறைவான அதிர்ச்சியூட்டும் அனுபவத்தைப் பெறுகிறார்.

டெவலப்பர்களுக்கான நடைமுறை தாக்கங்கள் மற்றும் நன்மைகள்

ஃபைபரின் கட்டமைப்பைப் புரிந்துகொள்வது ரியாக்ட் பயன்பாடுகளை மேம்படுத்துவதற்கும் அதன் முழுத் திறனைப் பயன்படுத்துவதற்கும் மதிப்புமிக்க நுண்ணறிவுகளை வழங்குகிறது:

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

சமரச வழிமுறையின் மைய தர்க்கத்தில் ஆழமான பார்வை

ரெண்டர் கட்டத்தின் போது ஃபைபர் மரத்திற்குள் ரியாக்ட் எவ்வாறு மாற்றங்களைக் கண்டறிகிறது என்பதன் மைய தர்க்கத்தை சுருக்கமாகப் பார்ப்போம்.

வேறுபடுத்தும் வழிமுறை மற்றும் யூகங்கள் (`key` ப்ராப்பின் பங்கு)

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

1. வெவ்வேறு உறுப்பு வகைகள்: ஒரு உறுப்பின் `type` மாறினால் (எ.கா., ஒரு `<div>` ஒரு `<p>` ஆக மாறினால்), ரியாக்ட் பழைய கூறு/உறுப்பைக் கிழித்துவிட்டு, புதியதை புதிதாக உருவாக்குகிறது. இது பழைய DOM முனையையும் அதன் அனைத்து குழந்தைகளையும் அழிப்பதைக் குறிக்கிறது.
2. ஒரே உறுப்பு வகை: `type` ஒன்றாக இருந்தால், ரியாக்ட் ப்ராப்ஸைப் பார்க்கிறது. அது தற்போதுள்ள DOM முனையில் மாற்றப்பட்ட ப்ராப்ஸை மட்டுமே புதுப்பிக்கிறது. இது மிகவும் திறமையான செயல்பாடு.
3. குழந்தைகளின் பட்டியல்களை சமரசம் செய்தல் (`key` ப்ராப்): இங்குதான் `key` ப்ராப் இன்றியமையாததாகிறது. குழந்தைகளின் பட்டியல்களை சமரசம் செய்யும்போது, ரியாக்ட் எந்த உருப்படிகள் மாற்றப்பட்டுள்ளன, சேர்க்கப்பட்டுள்ளன அல்லது அகற்றப்பட்டுள்ளன என்பதை அடையாளம் காண `keys` ஐப் பயன்படுத்துகிறது. `keys` இல்லாமல், ரியாக்ட் தற்போதுள்ள கூறுகளைத் திறமையற்ற முறையில் மீண்டும் ரெண்டர் செய்யலாம் அல்லது மறுவரிசைப்படுத்தலாம், இது செயல்திறன் சிக்கல்கள் அல்லது பட்டியல்களுக்குள் நிலை பிழைகளுக்கு வழிவகுக்கும். ஒரு தனித்துவமான, நிலையான `key` (எ.கா., ஒரு தரவுத்தள ஐடி, ஒரு வரிசை குறியீட்டெண் அல்ல) ரியாக்ட்டை பழைய பட்டியலிலிருந்து புதிய பட்டியலுக்கு உள்ள கூறுகளை துல்லியமாகப் பொருத்த அனுமதிக்கிறது, இது திறமையான புதுப்பிப்புகளை இயக்குகிறது.

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

ஃபைபர் வெவ்வேறு வகையான புதுப்பிப்புகளை எவ்வாறு கையாளுகிறது

ரியாக்ட்டில் ஒரு மறு-ரெண்டரைத் தூண்டும் எந்த மாற்றமும் (எ.கா., `setState`, `forceUpdate`, `useState` புதுப்பிப்பு, `useReducer` டிஸ்பாட்ச்) ஒரு புதிய சமரச செயல்முறையைத் தொடங்குகிறது. ஒரு புதுப்பிப்பு ஏற்படும்போது, ரியாக்ட்:

1. வேலையைத் திட்டமிடுகிறது: புதுப்பிப்பு ஒரு குறிப்பிட்ட முன்னுரிமையுடன் ஒரு வரிசையில் சேர்க்கப்படுகிறது.
2. வேலையைத் தொடங்குகிறது: திட்டமிடுபவர் அதன் முன்னுரிமை மற்றும் கிடைக்கும் நேரப் பங்குகளைப் பொறுத்து புதுப்பிப்பை எப்போது செயலாக்கத் தொடங்குவது என்பதைத் தீர்மானிக்கிறார்.
3. ஃபைபர்களைக் கடக்கிறது: ரியாக்ட் ரூட் ஃபைபரிலிருந்து (அல்லது புதுப்பிக்கப்பட்ட கூறின் அருகிலுள்ள பொதுவான மூதாதையர்) தொடங்கி கீழ்நோக்கிச் செல்கிறது.
4. `beginWork` செயல்பாடு: ஒவ்வொரு ஃபைபருக்கும், ரியாக்ட் `beginWork` செயல்பாட்டை அழைக்கிறது. இந்த செயல்பாடு குழந்தை ஃபைபர்களை உருவாக்குவதற்கும், தற்போதுள்ள குழந்தைகளை சமரசம் செய்வதற்கும், மற்றும் செயலாக்க அடுத்த குழந்தைக்கு ஒரு சுட்டியைத் திருப்பித் தருவதற்கும் பொறுப்பாகும்.
5. `completeWork` செயல்பாடு: ஒரு ஃபைபரின் அனைத்து குழந்தைகளும் செயலாக்கப்பட்டவுடன், ரியாக்ட் `completeWork` ஐ அழைத்து அந்த ஃபைபருக்கான வேலையை "முடிக்கிறது". இங்குதான் பக்க விளைவுகள் குறிக்கப்படுகின்றன (எ.கா., ஒரு DOM புதுப்பிப்பு தேவை, ஒரு வாழ்க்கைச் சுழற்சி முறையை அழைக்க வேண்டும்). இந்த செயல்பாடு ஆழமான குழந்தையிலிருந்து ரூட்டை நோக்கி மேலே குமிழ்கிறது.
6. விளைவுப் பட்டியல் உருவாக்கம்: `completeWork` இயங்கும்போது, அது "விளைவுப் பட்டியலை" உருவாக்குகிறது - இது கமிட் கட்டத்தில் பயன்படுத்தப்பட வேண்டிய பக்க விளைவுகளைக் கொண்ட அனைத்து ஃபைபர்களின் பட்டியல்.
7. கமிட்: ரூட் ஃபைபரின் `completeWork` முடிந்ததும், முழு விளைவுப் பட்டியலும் கடந்து செல்லப்படுகிறது, மற்றும் உண்மையான DOM கையாளுதல்கள் மற்றும் இறுதி வாழ்க்கைச் சுழற்சி/விளைவு அழைப்புகள் செய்யப்படுகின்றன.

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

ஃபைபரை மனதில் கொண்டு செயல்திறன் மேம்படுத்தல்

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

• நினைவூட்டல் (`React.memo`, `useMemo`, `useCallback`): இந்த கருவிகள் கூறுகளின் தேவையற்ற மறு-ரெண்டரிங் அல்லது மதிப்புகளின் மறு-கணக்கீடுகளை அவற்றின் வெளியீட்டை நினைவூட்டுவதன் மூலம் தடுக்கின்றன. ஃபைபரின் ரெண்டர் கட்டம், மாறாத கூறுகளைக் கூட கடந்து செல்வதை உள்ளடக்கியது. நினைவூட்டல் இந்த கட்டத்திற்குள் வேலையைத் தவிர்க்க உதவுகிறது. செயல்திறன் முக்கியமான ஒரு உலகளாவிய பயனர் தளத்திற்கு சேவை செய்யும் பெரிய, தரவு-இயக்கப்படும் பயன்பாடுகளுக்கு இது குறிப்பாக முக்கியமானது.
• குறியீடு பிரித்தல் (`React.lazy`, `Suspense`): குறியீடு பிரித்தலுக்கு சஸ்பென்ஸைப் பயன்படுத்துவது, பயனர்கள் எந்த நேரத்திலும் தங்களுக்குத் தேவையான ஜாவாஸ்கிரிப்ட் குறியீட்டை மட்டுமே பதிவிறக்கம் செய்வதை உறுதி செய்கிறது. ஆரம்ப ஏற்றுதல் நேரங்களை மேம்படுத்துவதற்கு இது இன்றியமையாதது, குறிப்பாக வளர்ந்து வரும் சந்தைகளில் மெதுவான இணைய இணைப்புகளில் உள்ள பயனர்களுக்கு.
• மெய்நிகராக்கம் (Virtualization): பெரிய பட்டியல்கள் அல்லது அட்டவணைகளைக் காண்பிப்பதற்கு (எ.கா., ஆயிரக்கணக்கான வரிசைகளைக் கொண்ட ஒரு நிதி டாஷ்போர்டு, அல்லது ஒரு உலகளாவிய தொடர்புகள் பட்டியல்), மெய்நிகராக்க நூலகங்கள் (`react-window` அல்லது `react-virtualized` போன்றவை) பார்வைக்குட்பட்ட உருப்படிகளை மட்டுமே ரெண்டர் செய்கின்றன. இது அடிப்படை தரவுத் தொகுதி மிகப் பெரியதாக இருந்தாலும், ரியாக்ட் செயலாக்க வேண்டிய ஃபைபர்களின் எண்ணிக்கையை வியத்தகு முறையில் குறைக்கிறது.
• ரியாக்ட் டெவ்டூல்ஸ் உடன் சுயவிவரப்படுத்தல்: ரியாக்ட் டெவ்டூல்ஸ் ஃபைபர் சமரச செயல்முறையை காட்சிப்படுத்த உங்களை அனுமதிக்கும் சக்திவாய்ந்த சுயவிவரப்படுத்தல் திறன்களை வழங்குகின்றன. எந்த கூறுகள் ரெண்டர் ஆகின்றன, ஒவ்வொரு கட்டமும் எவ்வளவு நேரம் எடுக்கிறது என்பதைக் காணலாம், மற்றும் செயல்திறன் தடைகளைக் கண்டறியலாம். சிக்கலான UI-களை பிழைத்திருத்தம் செய்வதற்கும் மேம்படுத்துவதற்கும் இது ஒரு தவிர்க்க முடியாத கருவியாகும்.
• தேவையற்ற ப்ராப் மாற்றங்களைத் தவிர்த்தல்: ஒவ்வொரு ரெண்டரிலும் புதிய பொருள் அல்லது வரிசை எழுத்துக்களை ப்ராப்ஸாக அனுப்புவதில் கவனமாக இருங்கள், அவற்றின் உள்ளடக்கம் சொற்பொருள் ரீதியாக மாறவில்லை என்றால். இது `React.memo` உடன் கூட குழந்தை கூறுகளில் தேவையற்ற மறு-ரெண்டர்களைத் தூண்டலாம், ஏனெனில் ஒரு புதிய குறிப்பு ஒரு மாற்றமாகக் காணப்படுகிறது.

முன்னோக்கிப் பார்த்தல்: ரியாக்ட்டின் எதிர்காலம் மற்றும் ஒருங்கமைவு அம்சங்கள்

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

• ரியாக்ட் சர்வர் கூறுகள் (RSC): ஃபைபரின் கிளையன்ட் பக்க சமரசத்தின் நேரடிப் பகுதியாக இல்லாவிட்டாலும், RSC-கள் சர்வரில் கூறுகளை ரெண்டர் செய்து கிளையன்டிற்கு ஸ்ட்ரீம் செய்ய கூறு மாதிரியைப் பயன்படுத்துகின்றன. இது ஆரம்ப பக்க ஏற்றுதல் நேரங்களை கணிசமாகக் மேம்படுத்தலாம் மற்றும் கிளையன்ட் பக்க ஜாவாஸ்கிரிப்ட் பண்டல்களைக் குறைக்கலாம், குறிப்பாக நெட்வொர்க் தாமதம் மற்றும் பண்டல் அளவுகள் பரவலாக மாறுபடும் உலகளாவிய பயன்பாடுகளுக்கு இது பயனுள்ளதாக இருக்கும்.
• திரைக்கு வெளியே API (Offscreen API): இந்த வரவிருக்கும் API ரியாக்ட்டை கூறுகளைத் திரைக்கு வெளியே ரெண்டர் செய்ய அனுமதிக்கிறது, அவை தெரியும் UI-இன் செயல்திறனைப் பாதிக்காமல். இது தாவல் இடைமுகங்கள் போன்ற காட்சிகளுக்கு பயனுள்ளதாக இருக்கும், அங்கு நீங்கள் செயலற்ற தாவல்களை ரெண்டர் செய்து (மற்றும் சாத்தியமான முன்-ரெண்டர் செய்து) வைத்திருக்க விரும்புகிறீர்கள், ஆனால் பார்வைக்கு செயலில் இல்லாமல், பயனர் தாவல்களை மாற்றும்போது உடனடி மாற்றங்களை உறுதி செய்கிறது.
• மேம்பட்ட சஸ்பென்ஸ் முறைகள்: சஸ்பென்ஸைச் சுற்றியுள்ள சூழல் அமைப்பு தொடர்ந்து உருவாகி வருகிறது, ஏற்றுதல் நிலைகள், மாற்றங்கள், மற்றும் இன்னும் சிக்கலான UI காட்சிகளுக்கான ஒருங்கமைவு ரெண்டரிங்கை நிர்வகிக்க மேலும் அதிநவீன வழிகளை வழங்குகிறது.

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

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

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

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