فهم البث المباشر في React 19
تعرف على كيفية عمل React streaming على مستوى العرض، وكيف يقوم React بتثبيت واجهة المستخدم بشكل تدريجي عندما تصبح جاهزة، دون التوقف عند الأجزاء الأبطأ من الشجرة.
نادراً ما تُحلّ التطبيقات الحديثة جميع تبعيات البيانات وواجهة المستخدم دفعةً واحدة. فبعض أجزاء الصفحة بالغة الأهمية لتحديد اتجاه الشاشة ويمكن عرضها فوراً، بينما يعتمد البعض الآخر على عمليات حسابية أبطأ، أو مجموعات بيانات ضخمة، أو خدمات خارجية. إذا تعاملنا مع الشاشة بأكملها كوحدة واحدة مُعيقة، سينتهي الأمر بالمستخدمين بالانتظار حتى يتم تحميل الجزء الأبطأ، على الرغم من أن معظم واجهة المستخدم جاهزة للاستخدام، مما يؤدي إلى تأخير الانطباعات الأولى والاعتماد المفرط على حالات تحميل الصفحة الكاملة.
من المفاهيم الخاطئة الشائعة أن "البث" يعني ببساطة تقسيم واجهة المستخدم إلى أجزاء كثيرة أو عرض المزيد من مؤشرات التحميل. في React، يتعلق البث بشكل أساسي بـcommit الاستراتيجية: يُمكن React الكشف عن واجهة المستخدم على مراحل عندما يكون ذلك آمنًا ، مما يُحافظ على استقرار المناطق المُخصصة مُسبقًا بينما يتم تحميل الأجزاء الأبطأ خلف حدودها الخاصة. بدون البث، غالبًا ما يُعوّض المطورون ذلك من خلال تنسيق علامات التحميل وعمليات العرض المشروطة يدويًا عبر التطبيق. مع البث، يُعالج React الكشف التدريجي على مستوى المُعالج، حيث يُخصص الأشجار الفرعية الجاهزة بمجرد توفرها بينما يستمر باقي التطبيق في العرض في الخلفية.
كيف React؟Streaming الأعمال: العرض مقابل commit
Streaming هي إحدى إمكانيات العرض التي تتيح لـ Reactcommit يتم عرض واجهة المستخدم على مراحل بدلاً من انتظار اكتمال عرض الشجرة بأكملها. هذا يعني أن المستخدمين يمكنهم رؤية الأجزاء الجاهزة والتفاعل معها بينما تستمر المناطق الأبطأ في التحميل.
هذا ممكن لأن React يفصلrender منcommit :render يقوم بحساب واجهة المستخدم التالية، وcommit يطبق ذلك على بيئة الاستضافة (مثل DOM). معstreaming يمكن لـ Reactcommit أي منطقة مكتملة غير محجوبة ببيانات غير محلولة.
Suspense تحدد الحدود الأماكن التي يمكن أن يتوقف فيها البث. إذا تم تعليق شجرة فرعية عن طريق طرح استثناءPromise لا يزال بإمكان Reactcommit كل شيء خارج هذا الحد ويظهرfallback (أو حجب تلك المنطقة). عند اكتمال معالجة البيانات، يُعيد React محاولة معالجة الشجرة الفرعية المُعلّقة، ويُثبّت واجهة المستخدم الفعلية لاحقًا دون التأثير على ما هو معروض على الشاشة. والأهم من ذلك، أن كل تحديث مُرسل يظل حالة واجهة مستخدم آمنة ومتسقة: لا يُثبّت React أبدًا مكونات جزئية، بل نتائج كاملة فقط.
بينما يحدث البث صحيح عبر الشبكة أثناء عرض خادم ، فإن دلالات الالتزام نفسها تنطبق على عميل؛ يركز هذا المثال على نموذج الالتزام، وليس النقل.
دعونا نتصور كيف يقوم React بعرض وتثبيت أجزاء مختلفة من واجهة المستخدم بشكل تدريجي عندما يتم تعليق شجرة فرعية.
يوضح الرسم التخطيطي أعلاه صفحة تتكون من رأس، ومنطقة محتوى، وقسم يحتوي على بيانات بطيئة التحميل. يبدأ React بعرض الشجرة بأكملها. يكتمل عرض الرأس ومنطقة المحتوى بسرعة، بينما يتوقف القسم البطيء. يقوم React بتثبيت الرأس والمحتوى المكتملين فورًا، ويعرضهما على الشاشة. يتم تخطي القسم المتوقف حاليًا. بمجرد تحميل بياناته، يستأنف React عرض تلك الشجرة الفرعية ويثبتها في تحديث لاحق، ليملأ واجهة المستخدم المتبقية بسلاسة دون إعادة عرض المحتوى المثبت مسبقًا أو إخفائه.
من وجهة نظر المستخدم، تبدو الصفحة سريعة الاستجابة على الفور: يظهر التنقل والمحتوى على الفور، وتمتلئ الأقسام الأبطأ بهدوء لاحقًا دون إعادة ضبط ما هو مرئي بالفعل.
مثال:Streaming من خلال التداخلSuspense
...