दिवस २: React UI कशी अपडेट करते

काल मी React काय करते हे शिकलो. आज मी ते कसे करते हे शिकलो.

UI मध्ये नेमके काय बदलायचे आहे हे React ला कसे समजते, असा प्रश्न मला नेहमी पडायचा. जर तुम्ही परिच्छेदातील एक शब्द बदलला, तर React संपूर्ण पेज पुन्हा तयार करते का? नाही. वेगवान राहण्यासाठी ते एका स्मार्ट प्रक्रियेचा वापर करते.

React अपडेट सायकलचा तपशील खालीलप्रमाणे आहे.

Reconciliation आणि Diffing

Reconciliation ही एक रणनीती (strategy) आहे. Diffing ही प्रत्यक्ष पद्धत आहे. React नवीन Virtual DOM ट्रीची जुन्या ट्रीशी तुलना करते.

दोन ट्रीची तुलना करणे संगणकासाठी कठीण असते. एक मानक अल्गोरिदम खूप संथ असतो. React दोन गृहितके (assumptions) मानून वेगवान राहते:

  • जर element चा प्रकार बदलला, तर React जुना ट्री नष्ट करते आणि नवीन ट्री तयार करते.
  • जर प्रकार तोच राहिला, तर React फक्त बदललेले attributes अपडेट करते.

यामुळे React O(n) वेळेत चालू शकते. यामुळे अपडेट्स त्वरित झाल्यासारखे वाटतात.

दोन टप्पे (The Two Phases)

React त्याचे काम दोन स्पष्ट टप्प्यांमध्ये विभागते:

१. Render Phase हा नियोजनाचा टप्पा आहे. React तुमचे components कॉल करते आणि बदल मोजते (calculates). येथे ते Real DOM ला स्पर्श करत नाही. एखाद्या आर्किटेक्टने ब्लूप्रिंट काढण्यासारखे हे समजा.

२. Commit Phase हा बांधकामाचा टप्पा आहे. React मोजलेले बदल Real DOM वर लागू करते. हा भाग synchronous आहे. एकदा सुरू झाले की, काम पूर्ण होईपर्यंत ते थांबत नाही.

महत्त्वाचे: React DOM अपडेट करते, परंतु ब्राउझर पिक्सेल्स पेंट करतो. React स्ट्रक्चर हाताळते. ब्राउझर व्हिज्युअल रेंडरिंग हाताळतो.

React Fiber

React 16 पूर्वी, रेंडरिंग synchronous होते. जर रेंडरिंगला जास्त वेळ लागला, तर ब्राउझर फ्रीझ व्हायचा. तुम्ही स्क्रोल करू शकत नसत किंवा टाईप करू शकत नसत.

Fiber ने हे बदलले. Fiber हे Render Phase व्यवस्थापित करणारे इंजिन आहे. यामुळे React ला खालील गोष्टी शक्य होतात:

  • काम थांबवणे आणि नंतर त्यावर परत येणे.
  • बॅकग्राउंड डेटापेक्षा युजरने टाईप करणे यांसारख्या तातडीच्या अपडेट्सना प्राधान्य देणे.
  • कामाचे लहान तुकड्यांमध्ये विभाजन करणे.

Virtual DOM ही डेटा स्ट्रक्चर आहे. Fiber हा त्या डेटावर काम करणारा अल्गोरिदम आहे.

प्रवाहाचा सारांश (Summary of the flow):

• State बदलतो. • Render Phase: React Diffing द्वारे बदलांचे नियोजन करते. • 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