ദിവസം 2: React എങ്ങനെയാണ് UI അപ്‌ഡേറ്റ് ചെയ്യുന്നത്

ഇന്നലെ ഞാൻ React എന്താണ് ചെയ്യുന്നതെന്ന് പഠിച്ചു. ഇന്ന് അത് എങ്ങനെയാണ് ചെയ്യുന്നതെന്ന് ഞാൻ പഠിച്ചു.

UI-യിൽ കൃത്യമായി എന്താണ് മാറ്റേണ്ടതെന്ന് React എങ്ങനെയാണ് അറിയുന്നതെന്ന് ഞാൻ എപ്പോഴും അത്ഭുതപ്പെടാറുണ്ടായിരുന്നു. ഒരു പാരഗ്രാഫിലെ ഒരു വാക്ക് മാത്രം മാറ്റിയാൽ പോലും React മുഴുവൻ പേജും വീണ്ടും നിർമ്മിക്കുമോ? ഇല്ല. വേഗത നിലനിർത്താൻ അത് ഒരു സ്മാർട്ട് പ്രക്രിയയാണ് ഉപയോഗിക്കുന്നത്.

React അപ്‌ഡേറ്റ് സൈക്കിളിന്റെ വിശദീകരണം താഴെ നൽകുന്നു.

Reconciliation ഉം Diffing ഉം

Reconciliation എന്നത് ഒരു തന്ത്രമാണ് (strategy). Diffing എന്നത് യഥാർത്ഥ രീതിയാണ് (method). React പുതിയ Virtual DOM ട്രീയെ പഴയതിനോട് താരതമ്യം ചെയ്യുന്നു.

രണ്ട് ട്രീകൾ തമ്മിൽ താരതമ്യം ചെയ്യുന്നത് കമ്പ്യൂട്ടറുകൾക്ക് പ്രയാസകരമാണ്. ഒരു സാധാരണ അൽഗോരിതം വളരെ സാവധാനമേ പ്രവർത്തിക്കൂ. രണ്ട് അനുമാനങ്ങൾ (assumptions) സ്വീകരിക്കുന്നതിലൂടെ React വേഗത നിലനിർത്തുന്നു:

  • ഒരു എലമെന്റ് ടൈപ്പ് മാറുന്നുണ്ടെങ്കിൽ, React പഴയ ട്രീ നശിപ്പിക്കുകയും പുതിയൊന്ന് നിർമ്മിക്കുകയും ചെയ്യുന്നു.
  • ടൈപ്പ് മാറുന്നില്ലെങ്കിൽ, മാറ്റം വന്ന അറ്റ്രിബ്യൂട്ടുകൾ (attributes) മാത്രം React അപ്‌ഡേറ്റ് ചെയ്യുന്നു.

ഇത് React-ന് O(n) സമയത്തിനുള്ളിൽ പ്രവർത്തിക്കാൻ അനുവദിക്കുന്നു. ഇത് അപ്‌ഡേറ്റുകൾ പെട്ടെന്ന് സംഭവിക്കുന്നതായി തോന്നിപ്പിക്കുന്നു.

രണ്ട് ഘട്ടങ്ങൾ (The Two Phases)

React അതിന്റെ ജോലിയെ രണ്ട് വ്യത്യസ്ത ഘട്ടങ്ങളായി തിരിക്കുന്നു:

  1. Render Phase ഇത് പ്ലാനിംഗ് ഘട്ടമാണ്. React നിങ്ങളുടെ കംപോണന്റുകളെ വിളിക്കുകയും മാറ്റങ്ങൾ കണക്കാക്കുകയും ചെയ്യുന്നു. ഇവിടെ അത് Real DOM-നെ സ്പർശിക്കുന്നില്ല. ഒരു ആർക്കിടെക്റ്റ് ബ്ലൂപ്രിന്റ് തയ്യാറാക്കുന്നത് പോലെ ഇതിനെ കരുതാം.

  2. Commit Phase ഇത് നിർമ്മാണ ഘട്ടമാണ്. React കണക്കാക്കിയ മാറ്റങ്ങൾ Real DOM-ൽ പ്രയോഗിക്കുന്നു. ഈ ഭാഗം സിൻക്രണസ് (synchronous) ആണ്. ഒരിക്കൽ ഇത് തുടങ്ങിയാൽ, ജോലി പൂർത്തിയാകുന്നത് വരെ ഇത് നിൽക്കില്ല.

പ്രധാനപ്പെട്ടത്: React DOM അപ്‌ഡേറ്റ് ചെയ്യുന്നു, എന്നാൽ ബ്രൗസറാണ് പിക്സലുകൾ പെയിന്റ് ചെയ്യുന്നത്. React ഘടന (structure) കൈകാര്യം ചെയ്യുന്നു. ബ്രൗസർ വിഷ്വൽ റെൻഡറിംഗ് (visual rendering) കൈകാര്യം ചെയ്യുന്നു.

React Fiber

React 16-ന് മുമ്പ്, റെൻഡറിംഗ് സിൻക്രണസ് ആയിരുന്നു. ഒരു റെൻഡറിംഗിന് കൂടുതൽ സമയം എടുത്താൽ ബ്രൗസർ ഫ്രീസ് ആയേക്കാം. നിങ്ങൾക്ക് സ്ക്രോൾ ചെയ്യാനോ ടൈപ്പ് ചെയ്യാനോ കഴിയില്ലായിരുന്നു.

Fiber ഇത് മാറ്റിമറിച്ചു. Render Phase നിയന്ത്രിക്കുന്ന എൻജിനാണ് Fiber. ഇത് React-ന് താഴെ പറയുന്നവ ചെയ്യാൻ അനുവദിക്കുന്നു:

  • ജോലി താൽക്കാലികമായി നിർത്തിവെക്കാനും പിന്നീട് അത് തുടരാനും.
  • ബാക്ക്ഗ്രൗണ്ട് ഡാറ്റയേക്കാൾ ഉപരിയായി ഉപയോക്താവ് ടൈപ്പ് ചെയ്യുന്നത് പോലുള്ള അടിയന്തര അപ്‌ഡേറ്റുകൾക്ക് മുൻഗണന നൽകാൻ.
  • ജോലിയെ ചെറിയ ഭാഗങ്ങളായി തിരിക്കാൻ.

Virtual DOM എന്നത് ഒരു ഡാറ്റാ സ്ട്രക്ചർ ആണ്. ആ ഡാറ്റയിൽ പ്രവർത്തിക്കുന്ന അൽഗോരിതമാണ് Fiber.

പ്രക്രിയയുടെ സംഗ്രഹം (Summary of the flow):

• State മാറുന്നു. • Render Phase: Diffing വഴി React മാറ്റങ്ങൾ പ്ലാൻ ചെയ്യുന്നു. • Commit Phase: React Real DOM അപ്‌ഡേറ്റ് ചെയ്യുന്നു. • Browser: Layout, Paint, and Composite. • പിക്സലുകൾ സ്ക്രീനിൽ പ്രത്യക്ഷപ്പെടുന്നു.

Source: https://dev.to/bismay-exe/day-2-of-learning-react-reconciliation-diffing-algorithm-render-phase-commit-phase-react-4f0f