اليوم الثاني: كيف يقوم React بتحديث واجهة المستخدم (UI)

بالأمس تعلمت ماذا يفعل React. واليوم تعلمت كيف يفعل ذلك.

كنت أتساءل كيف يعرف React بالضبط ما الذي يجب تغييره في واجهة المستخدم. إذا قمت بتغيير كلمة واحدة في فقرة، هل يقوم React بإعادة بناء الصفحة بأكملها؟ لا. إنه يستخدم عملية ذكية ليظل سريعاً.

إليك تفصيل دورة تحديث React.

Reconciliation و Diffing

الـ Reconciliation هي الاستراتيجية، بينما الـ Diffing هو الأسلوب الفعلي. يقوم React بمقارنة شجرة الـ Virtual DOM الجديدة بالشجرة القديمة.

مقارنة شجرتين أمر صعب على أجهزة الكمبيوتر، والخوارزمية القياسية تكون بطيئة جداً. يحافظ React على سرعته من خلال وضع افتراضين:

  • إذا تغير نوع العنصر، يقوم React بتدمير الشجرة القديمة وبناء شجرة جديدة.
  • إذا ظل النوع كما هو، يقوم React فقط بتحديث السمات (attributes) المتغيرة.

هذا يسمح لـ React بالعمل بزمن قدره O(n)، مما يجعل التحديثات تبدو فورية.

المرحلتان

يقسم React عمله إلى خطوتين متميزتين:

  1. مرحلة الـ Render هذه هي مرحلة التخطيط. يقوم React باستدعاء مكوناتك (components) وحساب التغييرات. لا يلمس الـ Real DOM هنا. فكر في الأمر كمهندس معماري يرسم مخططاً.

  2. مرحلة الـ Commit هذه هي مرحلة البناء. يقوم React بتطبيق التغييرات المحسوبة على الـ Real DOM. هذا الجزء متزامن (synchronous). وبمجرد أن يبدأ، لا يتوقف حتى ينتهي العمل.

هام: يقوم React بتحديث الـ DOM، ولكن المتصفح هو من يقوم برسم البكسلات (pixels). React يتولى الهيكلية، بينما يتولى المتصفح عملية الرندرة المرئية (visual rendering).

React Fiber

قبل إصدار React 16، كانت عملية الـ rendering متزامنة. إذا استغرقت عملية الـ render وقتاً طويلاً، فإن المتصفح يتجمد، ولن تتمكن من التمرير أو الكتابة.

لقد غير Fiber ذلك. Fiber هو المحرك الذي يدير مرحلة الـ Render، وهو يسمح لـ React بـ:

  • إيقاف العمل والعودة إليه لاحقاً.
  • إعطاء الأولوية للتحديثات العاجلة، مثل كتابة المستخدم، على حساب بيانات الخلفية.
  • تقسيم العمل إلى أجزاء صغيرة.

الـ Virtual DOM هو هيكل البيانات، بينما Fiber هو الخوارزمية التي تعمل على تلك البيانات.

ملخص التدفق:

• تتغير الحالة (State). • مرحلة الـ Render: يخطط React للتغييرات عبر الـ Diffing. • مرحلة الـ Commit: يقوم React بتحديث الـ Real DOM. • المتصفح: التخطيط (Layout)، الرسم (Paint)، والتركيب (Composite). • تظهر البكسلات على الشاشة.

المصدر: https://dev.to/bismay-exe/day-2-of-learning-react-reconciliation-diffing-algorithm-render-phase-commit-phase-react-4f0f