दिन 2: React UI को कैसे अपडेट करता है
कल मैंने सीखा कि React क्या करता है। आज मैंने सीखा कि यह इसे कैसे करता है।
मैं अक्सर सोचता था कि React को कैसे पता चलता है कि UI में ठीक क्या बदलना है। यदि आप एक पैराग्राफ में एक शब्द बदलते हैं, तो क्या React पूरे पेज को फिर से बनाता है? नहीं। तेज़ बने रहने के लिए यह एक स्मार्ट प्रक्रिया का उपयोग करता है।
यहाँ React अपडेट साइकिल का विवरण दिया गया है।
Reconciliation और Diffing
Reconciliation एक रणनीति है। Diffing वास्तविक तरीका है। React नए Virtual DOM ट्री की तुलना पुराने ट्री से करता है।
दो ट्री की तुलना करना कंप्यूटरों के लिए कठिन होता है। एक मानक एल्गोरिदम बहुत धीमा होता है। React दो धारणाओं (assumptions) के आधार पर तेज़ बना रहता है:
- यदि किसी element का type बदल जाता है, तो React पुराने ट्री को नष्ट कर देता है और एक नया ट्री बनाता है।
- यदि type वही रहता है, तो React केवल बदले हुए attributes को अपडेट करता है।
यह React को O(n) समय में चलने की अनुमति देता है। इससे अपडेट तुरंत होते हुए महसूस होते हैं।
दो चरण (The Two Phases)
React अपने काम को दो अलग-अलग चरणों में विभाजित करता है:
Render Phase यह योजना बनाने का चरण है। React आपके components को कॉल करता है और परिवर्तनों की गणना करता है। यहाँ यह Real DOM को नहीं छूता है। इसे एक आर्किटेक्ट द्वारा ब्लूप्रिंट बनाने की तरह समझें।
Commit Phase यह निर्माण का चरण है। React गणना किए गए परिवर्तनों को Real DOM पर लागू करता है। यह हिस्सा synchronous है। एक बार शुरू होने के बाद, यह काम पूरा होने तक नहीं रुकता है।
महत्वपूर्ण: React DOM को अपडेट करता है, लेकिन ब्राउज़र पिक्सेल को पेंट करता है। React संरचना (structure) को संभालता है। ब्राउज़र विज़ुअल रेंडरिंग (visual rendering) को संभालता है।
React Fiber
React 16 से पहले, रेंडरिंग synchronous थी। यदि रेंडरिंग में लंबा समय लगता, तो ब्राउज़र फ्रीज़ हो जाता था। आप स्क्रॉल या टाइप नहीं कर पाते थे।
Fiber ने इसे बदल दिया। Fiber वह इंजन है जो Render Phase को मैनेज करता है। यह React को अनुमति देता है:
- काम को रोकने और बाद में उस पर वापस आने की।
- बैकग्राउंड डेटा की तुलना में यूजर के टाइप करने जैसे ज़रूरी अपडेट्स को प्राथमिकता देने की।
- काम को छोटे-छोटे हिस्सों (chunks) में विभाजित करने की।
Virtual DOM एक डेटा स्ट्रक्चर है। Fiber वह एल्गोरिदम है जो उस डेटा पर काम करता है।
फ्लो का सारांश:
• State बदलती है। • Render Phase: React Diffing के माध्यम से परिवर्तनों की योजना बनाता है। • Commit Phase: React Real DOM को अपडेट करता है। • Browser: Layout, Paint, और Composite। • स्क्रीन पर पिक्सेल दिखाई देते हैं।