రోజు 2: React UIని ఎలా అప్‌డేట్ చేస్తుంది

నిన్న నేను React ఏమి చేస్తుందో తెలుసుకున్నాను. ఈరోజు అది ఎలా చేస్తుందో తెలుసుకున్నాను.

UIలో ఖచ్చితంగా ఏమి మార్చాలో Reactకి ఎలా తెలుస్తుందో అని నేను ఎప్పుడూ ఆలోచించేవాడిని. ఒక పేరాగ్రాఫ్‌లో మీరు ఒక పదాన్ని మారిస్తే, React మొత్తం పేజీని మళ్ళీ నిర్మిస్తుందా? లేదు. వేగంగా ఉండటానికి ఇది ఒక తెలివైన ప్రక్రియను ఉపయోగిస్తుంది.

React అప్‌డేట్ సైకిల్ యొక్క వివరణ ఇక్కడ ఉంది.

Reconciliation మరియు Diffing

Reconciliation అనేది వ్యూహం (strategy). Diffing అనేది అసలైన పద్ధతి. React కొత్త Virtual DOM ట్రీని పాత దానితో పోల్చి చూస్తుంది.

రెండు ట్రీలను పోల్చడం కంప్యూటర్లకు కష్టమైన పని. ఒక సాధారణ అల్గారిథమ్ చాలా నెమ్మదిగా ఉంటుంది. React రెండు ఊహల (assumptions) ద్వారా వేగంగా పనిచేస్తుంది:

  • ఒకవేళ ఎలిమెంట్ టైప్ మారితే, React పాత ట్రీని తొలగించి కొత్త దానిని నిర్మిస్తుంది.
  • ఒకవేళ టైప్ మారకుండా ఒకేలా ఉంటే, React కేవలం మారిన attributes మాత్రమే అప్‌డేట్ చేస్తుంది.

దీనివల్ల React O(n) సమయంలో నడవగలదు. ఇది అప్‌డేట్‌లు తక్షణమే జరిగినట్లు అనిపించేలా చేస్తుంది.

రెండు దశలు (The Two Phases)

React తన పనిని రెండు విభిన్న దశలుగా విభజిస్తుంది:

  1. Render Phase ఇది ప్రణాళికా దశ (planning stage). React మీ కాంపోనెంట్స్‌ని పిలుస్తుంది మరియు మార్పులను లెక్కిస్తుంది. ఇది ఇక్కడ Real DOMని తాకదు. ఒక ఆర్కిటెక్ట్ బ్లూప్రింట్ గీస్తున్నట్లుగా దీనిని భావించండి.

  2. Commit Phase ఇది నిర్మాణ దశ (construction stage). React లెక్కించిన మార్పులను Real DOMకి వర్తింపజేస్తుంది. ఈ భాగం సింక్రోనస్ (synchronous) గా ఉంటుంది. ఇది ఒకసారి ప్రారంభమైతే, పని పూర్తయ్యే వరకు ఆగదు.

ముఖ్యమైనది: React DOMని అప్‌డేట్ చేస్తుంది, కానీ బ్రౌజర్ పిక్సెల్స్‌ను పెయింట్ చేస్తుంది. React నిర్మాణాన్ని (structure) నిర్వహిస్తుంది. బ్రౌజర్ విజువల్ రెండరింగ్‌ను నిర్వహిస్తుంది.

React Fiber

React 16 కంటే ముందు, రెండరింగ్ సింక్రోనస్‌గా ఉండేది. ఒకవేళ రెండరింగ్ ఎక్కువ సమయం తీసుకుంటే, బ్రౌజర్ ఫ్రీజ్ అయిపోయేది. మీరు స్క్రోల్ చేయడం లేదా టైప్ చేయడం చేయలేరు.

Fiber దీనిని మార్చింది. Fiber అనేది Render Phaseని నిర్వహించే ఇంజిన్. ఇది React కి ఈ క్రింది వాటిని అనుమతిస్తుంది:

  • పనిని తాత్కాలికంగా ఆపివేసి, తర్వాత మళ్ళీ ప్రారంభించడం.
  • బ్యాక్‌గ్రౌండ్ డేటా కంటే యూజర్ టైపింగ్ వంటి అత్యవసర అప్‌డేట్‌లకు ప్రాధాన్యత ఇవ్వడం.
  • పనిని చిన్న చిన్న భాగాలుగా విభజించడం.

Virtual DOM అనేది డేటా స్ట్రక్చర్. Fiber అనేది ఆ డేటాపై పనిచేసే అల్గారిథమ్.

ఫ్లో యొక్క సారాంశం:

• 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