دوسرا دن: React UI کو کیسے اپ ڈیٹ کرتا ہے

کل میں نے سیکھا کہ React کیا کرتا ہے۔ آج میں نے سیکھا کہ یہ کیسے کرتا ہے۔

میں اکثر سوچتا تھا کہ React کو کیسے معلوم ہوتا ہے کہ UI میں بالکل کیا تبدیل کرنا ہے۔ اگر آپ ایک پیراگراف میں ایک لفظ بدلتے ہیں، تو کیا React پورا صفحہ دوبارہ بناتا ہے؟ نہیں۔ یہ تیز رہنے کے لیے ایک ذہین عمل استعمال کرتا ہے۔

یہاں React اپ ڈیٹ سائیکل کی تفصیل دی گئی ہے۔

Reconciliation اور Diffing

Reconciliation ایک حکمت عملی ہے۔ Diffing اصل طریقہ کار ہے۔ React نئے Virtual DOM ٹری کا پرانے ٹری کے ساتھ موازنہ کرتا ہے۔

دو ٹریز کا موازنہ کرنا کمپیوٹرز کے لیے مشکل ہوتا ہے۔ ایک معیاری الگورتھم بہت سست ہوتا ہے۔ React دو مفروضوں کے ذریعے تیز رہتا ہے:

  • اگر ایلیمنٹ کی قسم (type) بدل جائے، تو React پرانے ٹری کو ختم کر دیتا ہے اور ایک نیا ٹری بناتا ہے۔
  • اگر قسم وہی رہے، تو React صرف تبدیل شدہ ایٹریبیوٹس (attributes) کو اپ ڈیٹ کرتا ہے۔

یہ React کو O(n) وقت میں چلنے کی اجازت دیتا ہے۔ اس سے اپ ڈیٹس فوری محسوس ہوتی ہیں۔

دو مراحل

React اپنے کام کو دو الگ الگ مراحل میں تقسیم کرتا ہے:

  1. Render Phase یہ منصوبہ بندی کا مرحلہ ہے۔ React آپ کے components کو کال کرتا ہے اور تبدیلیوں کا حساب لگاتا ہے۔ یہ یہاں Real DOM کو نہیں چھوتا۔ اسے ایک آرکیٹیکٹ کی طرح سمجھیں جو بلو پرنٹ بنا رہا ہو۔

  2. Commit Phase یہ تعمیر کا مرحلہ ہے۔ React حساب لگائی گئی تبدیلیوں کو Real DOM پر لاگو کرتا ہے۔ یہ حصہ synchronous ہے۔ ایک بار شروع ہونے کے بعد، یہ کام مکمل ہونے تک نہیں رکتا۔

اہم: React DOM کو اپ ڈیٹ کرتا ہے، لیکن براؤزر پکسلز کو پینٹ کرتا ہے۔ React ڈھانچے (structure) کو سنبھالتا ہے۔ براؤزر بصری رینڈرنگ (visual rendering) کو سنبھالتا ہے۔

React Fiber

React 16 سے پہلے، رینڈرنگ synchronous تھی۔ اگر رینڈرنگ میں زیادہ وقت لگتا، تو براؤزر فریز ہو جاتا۔ آپ اسکرول یا ٹائپ نہیں کر پاتے۔

Fiber نے اسے بدل دیا۔ Fiber وہ انجن ہے جو Render Phase کو مینیج کرتا ہے۔ یہ React کو اجازت دیتا ہے کہ:

  • کام کو روک دے اور بعد میں اس پر واپس آئے۔
  • بیک گراؤنڈ ڈیٹا کے مقابلے میں صارف کی ٹائپنگ جیسے فوری اپ ڈیٹس کو ترجیح دے۔
  • کام کو چھوٹے حصوں میں تقسیم کرے۔

Virtual DOM ڈیٹا اسٹرکچر ہے۔ Fiber وہ الگورتھم ہے جو اس ڈیٹا پر کام کرتا ہے۔

بہاؤ کا خلاصہ:

• 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