حدود التشويق المتداخلة

لا يواجه المستخدمون مشكلة التبعيات غير المتزامنة؛ بل يواجهون شاشة إما أنها تعيق تحميل الكثير من البيانات أو يتم تحميلها على أجزاء. لقد رأيت كلا الحالتين:

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

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

عادةً ما تشترك كلتا النتيجتين في نفس السبب الجذري. مع توسع تطبيقات React ،async لم يعد الأمر يقتصر على فئة واحدة. فليست كل التبعيات بنفس القدر من الأهمية. بعض البيانات ضرورية لتحديد السياق (الهوية، الأذونات، محتوى مستوى المسار)، بينما بيانات أخرى إضافية (التوصيات، الرسوم البيانية الثانوية، موجزات الأنشطة). عندما تحصر كل ذلك خلف نظام واحد كبير.<Suspense> عند استخدام خاصية "الحدود"، فإنك تجبر React على الاختيار بين خيارين: إما أن تكون الشجرة الفرعية بأكملها جاهزة للالتزام، أو أن المستخدم يرى فقط النسخة الاحتياطية.

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

متداخل<Suspense> تُعدّ الحدود في React وسيلةً للتعبير عن هذا التباين الدقيق. فهي تُمكّنك من الحفاظ على تماسك واجهة المستخدم مع إمكانية عرضها على شكل طبقات. فبدلاً من جعل الميزة بأكملها تنتظر أبطأ تبعية، يمكنك تثبيت إطار رئيسي ثابت (العنوان، والتخطيط، وعناصر التحكم الرئيسية) وتأجيل تحميل المنطقة الفرعية التي لا تزال تنتظر فقط. وهذا يُتيح لك التحميل التدريجي دون اللجوء إلى التحميل المُشتّت.isLoading الأعلام والعرض الشرطي الهش.

لماذا يتلاشى حاجز التشويق الواحد مع نمو التطبيقات؟

فرد واحد<Suspense> يعمل نظام الحدود بشكل جيد عندما تتشارك التبعيات غير المتزامنة للشجرة الفرعية نفس متطلبات الجاهزية - إما أن تكون الميزة بأكملها مفيدة فقط عندما يكون كل شيء جاهزًا، أو لا يكون أي منها جاهزًا. تكمن المشكلة في أن الميزات الحقيقية نادرًا ما تتصرف بهذه الطريقة.

بمجرد أن تمزج إحدى الميزات بين التبعيات ذات الأهمية المختلفة، فإن أحد الحدود يفرض مقايضة سيئة:

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

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

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

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

كيف تتداخل؟Suspense العمل على الحدود

Suspense تُحدد الحدود نطاقات الالتزام، وهي مناطق في الشجرة يتعامل معها React كوحدات ذرية عند الالتزام بواجهة المستخدم. عندما تكون الحدود متداخلة، تصبح هذه النطاقات هرمية. يمكن للحد الداخلي أن يُعلق ويُظهرfallback دون إجبار حدودها الأصلية على التوقف، طالما أن الشجرة الفرعية الأصلية لا تزال قادرة على إكمال عملية العرض.

هذا يعني أن React يمكنها تثبيت واجهة المستخدم الرئيسية مع تأجيل منطقة أعمق وأكثر تحديدًا. يحدد الحد الخارجي عقدًا عامًا، مثل: من الآمن عرض هذه الميزة بأكملها ، بينما تُحسّن الحدود الداخلية هذا العقد، ...