நாள் 2: React எவ்வாறு UI-ஐ புதுப்பிக்கிறது

நேற்று React என்ன செய்கிறது என்பதைப் பற்றி கற்றேன். இன்று அது அதை எவ்வாறு செய்கிறது என்பதைப் பற்றி கற்றேன்.

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

React புதுப்பிப்பு சுழற்சியின் (update cycle) விவரம் இதோ.

Reconciliation மற்றும் Diffing

Reconciliation என்பது ஒரு உத்தி (strategy). Diffing என்பது அதன் உண்மையான முறை (method). React புதிய Virtual DOM மரத்தை (tree) பழைய மரத்துடன் ஒப்பிடுகிறது.

இரண்டு மரங்களை ஒப்பிடுவது கணினிகளுக்குக் கடினமானது. ஒரு சாதாரண அல்காரிதம் (algorithm) மிகவும் மெதுவாக இருக்கும். React இரண்டு அனுமானங்களைச் செய்வதன் மூலம் வேகமாகச் செயல்படுகிறது:

  • ஒரு உறுப்பின் வகை (element type) மாறினால், React பழைய மரத்தை அழித்துவிட்டுப் புதிய ஒன்றை உருவாக்குகிறது.
  • வகை மாறாமல் இருந்தால், React மாற்றப்பட்ட பண்புகளை (attributes) மட்டும் புதுப்பிக்கிறது.

இது React-ஐ O(n) நேரத்தில் இயங்க அனுமதிக்கிறது. இது புதுப்பிப்புகளைத் தடையின்றி உடனடியாக நடப்பது போன்ற உணர்வைத் தருகிறது.

இரண்டு நிலைகள் (The Two Phases)

React தனது வேலையை இரண்டு தனித்தனி நிலைகளாகப் பிரிக்கிறது:

  1. Render Phase இது திட்டமிடும் நிலை. React உங்கள் கூறுகளை (components) அழைத்து மாற்றங்களைக் கணக்கிடுகிறது. இது இங்கே Real DOM-ஐத் தொடாது. ஒரு கட்டிடக் கலைஞர் வரைபடம் (blueprint) வரைவதைப் போல இதை நினைத்துக் கொள்ளலாம்.

  2. Commit Phase இது கட்டுமான நிலை. React கணக்கிடப்பட்ட மாற்றங்களை Real DOM-இல் செயல்படுத்துகிறது. இந்தப் பகுதி ஒத்திசைவானது (synchronous). இது தொடங்கியவுடன், வேலை முடியும் வரை நிற்காது.

முக்கியம்: React DOM-ஐப் புதுப்பிக்கிறது, ஆனால் பிரவுசர் (browser) பிக்சல்களை (pixels) வரைகிறது. React கட்டமைப்பைக் கையாள்கிறது. பிரவுசர் காட்சித் தரவை (visual rendering) கையாள்கிறது.

React Fiber

React 16-க்கு முன்பு, rendering ஒத்திசைவாக (synchronous) இருந்தது. ஒரு render அதிக நேரம் எடுத்தால், பிரவுசர் உறையும் (freeze). உங்களால் ஸ்க்ரோல் செய்யவோ அல்லது தட்டச்சு செய்யவோ முடியாது.

Fiber இதை மாற்றியது. Fiber என்பது Render Phase-ஐ நிர்வகிக்கும் ஒரு இயந்திரம் (engine). இது React-க்கு பின்வருவனவற்றை அனுமதிக்கிறது:

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

Virtual DOM என்பது ஒரு தரவு அமைப்பு (data structure). Fiber என்பது அந்தத் தரவின் மீது செயல்படும் அல்காரிதம் (algorithm) ஆகும்.

செயல்பாட்டின் சுருக்கம்:

• State மாறுகிறது. • Render Phase: Diffing மூலம் React மாற்றங்களைத் திட்டமிடுகிறது. • Commit Phase: React Real DOM-ஐப் புதுப்பிக்கிறது. • Browser: Layout, Paint, மற்றும் Composite. • திரையில் பிக்சல்கள் தோன்றுகின்றன.

ஆதாரம்: https://dev.to/bismay-exe/day-2-of-learning-react-reconciliation-diffing-algorithm-render-phase-commit-phase-react-4f0f