દિવસ ૨: React UI ને કેવી રીતે અપડેટ કરે છે

ગઈકાલે મેં શીખ્યું કે React શું કરે છે. આજે મેં શીખ્યું કે તે તે કેવી રીતે કરે છે.

હું વિચારતો હતો કે React ને કેવી રીતે ખબર પડે છે કે UI માં બરાબર શું બદલવું જોઈએ. જો તમે ફકરામાં એક શબ્દ બદલો છો, તો શું React આખું પેજ ફરીથી બનાવે છે? ના. તે ઝડપી રહેવા માટે એક સ્માર્ટ પ્રક્રિયાનો ઉપયોગ કરે છે.

અહીં React અપડેટ સાયકલનું વિભાજન છે.

Reconciliation અને Diffing

Reconciliation એ વ્યૂહરચના છે. Diffing એ વાસ્તવિક પદ્ધતિ છે. React નવા Virtual DOM ટ્રીની જૂના ટ્રી સાથે સરખામણી કરે છે.

બે ટ્રીની સરખામણી કરવી કોમ્પ્યુટર્સ માટે અઘરી છે. એક પ્રમાણભૂત (standard) અલ્ગોરિધમ ખૂબ જ ધીમું હોય છે. React બે ધારણાઓ દ્વારા ઝડપી રહે છે:

  • જો એલિમેન્ટનો પ્રકાર (type) બદલાય છે, તો React જૂના ટ્રીને નષ્ટ કરે છે અને નવું બનાવે છે.
  • જો પ્રકાર સમાન રહે છે, તો React ફક્ત બદલાયેલા એટ્રિબ્યુટ્સ (attributes) ને જ અપડેટ કરે છે.

આનાથી React ને O(n) સમયમાં ચલાવવામાં મદદ મળે છે. આનાથી અપડેટ્સ ત્વરિત લાગે છે.

બે તબક્કા (The Two Phases)

React તેના કામને બે અલગ તબક્કાઓમાં વિભાજિત કરે છે:

  1. Render Phase આ આયોજનનો તબક્કો છે. React તમારા components ને કોલ કરે છે અને ફેરફારોની ગણતરી કરે છે. તે અહીં Real DOM ને સ્પર્શ કરતું નથી. તેને એક આર્કિટેક્ટ દ્વારા બ્લુપ્રિન્ટ દોરવા જેવું સમજો.

  2. Commit Phase આ બાંધકામનો તબક્કો છે. React ગણતરી કરેલા ફેરફારોને Real DOM પર લાગુ કરે છે. આ ભાગ synchronous છે. એકવાર તે શરૂ થાય, પછી કામ પૂરું ન થાય ત્યાં સુધી તે અટકતું નથી.

મહત્વપૂર્ણ: React DOM ને અપડેટ કરે છે, પરંતુ બ્રાઉઝર પિક્સેલ્સને પેઇન્ટ (paint) કરે છે. React માળખું (structure) સંભાળે છે. બ્રાઉઝર વિઝ્યુઅલ રેન્ડરિંગ સંભાળે છે.

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