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