ما هو التشويق ولماذا يوجد

غالباً ما تستخدم تطبيقات React نمطاً بسيطاً لجلب البيانات: عرض المكون، ثم بدء طلب عادةً بتأثير مثلuseEffect قم بتخزين النتيجة في الحالة، واعرض مؤشرًا دوارًا أثناء ذلك.isLoading هذا صحيح. في تطبيق صغير، يبدو هذا طبيعياً لأن كل شيء يتم جلبه محلياً، والمنطق موجود بجوار واجهة المستخدم التي تستخدمه، ولا يوجد سوى عدد قليل من حالات التحميل التي يجب التفكير فيها.

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

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

هناك أيضًا تكلفة تقنية أعمق. فعندما لا تكون البيانات جاهزة، تستمر المكونات في التحميل والعرض، ولكن في وضع وقائي. وينتهي بك الأمر بكتابة الكثير مما يلي:

• if (!data) return <Spinner />;

• data?.field ?? "—"

• نسختان منفصلتان من نفس المكون: "التحميل" و"النسخة الفعلية".

• قواعد مكررة للأخطاء والحالات الفارغة والبيانات الجزئية

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

منع واجهة المستخدم الوسيطة غير المتناسقة باستخدام Suspense

Suspense لا يتعلق الأمر بمؤشرات التحميل، بل بأهلية العرض. يتعامل React مع العرض كعملية تخمينية، حيث يحاول عرض شجرة، وإذا لم تكتمل هذه الشجرة بعد، يحتاج React إلى طريقة للتوقف والانتظار ثم الاستئناف لاحقًا دون إظهار واجهة مستخدم معطوبة على الشاشة. من الناحية النظرية،Suspense يُقدّم هذا المفهوم فكرة أن أجزاءً من شجرة المكونات قد تكون غير متاحة مؤقتًا. فبدلًا من أن تُدير المكونات حالاتها الخاصة "غير جاهزة بعد"، يُمكنها أن تُعلن: "لا يُمكنني إنهاء العرض الآن". عندئذٍ، يتولى React مسؤولية تنسيق ما يراه المستخدم أثناء بقاء هذا العمل غير مكتمل.

يُغيّر هذا ...