الاشتراك في واجهات API للمتصفح

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

تضيف دالة subscribe مستمع تغيير إلى MediaQueryList، بينما تعيد getSnapshot قيمة matches المنطقية الحالية، مما يمنحك وصولًا تفاعليًا إلى الظروف المتجاوبة.

يتيح تغليف هذا المنطق في وصلة useMediaQuery للمكوّنات الاستعلام عمّا إذا كان استعلام معين مطابقًا باستدعاء واحد. وتبني الوصلة subscribe وgetSnapshot مستقرتين حول سلسلة استعلام معينة.

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

يوفر المتصفح أحداث الاتصال وعدم الاتصال، بالإضافة إلى navigator.onLine. ويتيح الاشتراك في هذه الأحداث وقراءة الخاصية الحصول على حالة اتصال مباشرةً داخل React.

تعيد getSnapshot قيمة navigator.onLine، بينما تضيف subscribe مستمعين إلى حدثَي online وoffline، كي يُحدّث المكوّن نفسه عند تغيّر الاتصال.

يتيح تجميع ذلك في وصلة useOnlineStatus لأي مكوّن عرض لافتات عدم الاتصال أو تعطيل الإجراءات عند انقطاع الشبكة. وتستخدم وثائق React الرسمية هذا المثال نفسه لشرح الوصلة.

إنها حالة صغيرة لكنها توضيحية، إذ تُحوّل إشارة خارجية من المتصفح بسهولة إلى جزء من الحالة التفاعلية.

يمكنك الاشتراك في تغييرات التنقل بالاستماع إلى حدث popstate وقراءة window.location في getSnapshot. وهذا يشكّل أساس أجهزة توجيه مخصصة بسيطة مبنية على History API.

وبما أن pushState لا يُصدر حدث popstate، غالبًا ما تُصدر أجهزة التوجيه المخصصة حدثًا خاصًا بها، كي تُحدَّث اللقطة أيضًا عند التنقل البرمجي.

يُطلَق حدث storage في علامات التبويب الأخرى عند تغيّر localStorage، مما يجعله مخزنًا خارجيًا يمكنك الاشتراك فيه. وتقرأ getSnapshot القيمة الحالية، بينما تستمع subscribe إلى أحداث storage.

يتيح ذلك المزامنة بين علامات التبويب، بحيث يؤدي تحديث قيمة في علامة تبويب إلى تحديث المكوّنات تفاعليًا في علامة تبويب أخرى.

يُبلغ حدث deviceorientation عن الميل الفيزيائي للجهاز. ويؤدي الاشتراك فيه وقراءة الزوايا الأحدث في getSnapshot إلى تحويل بيانات الحركة إلى حالة تفاعلية.

يفيد ذلك في تأثيرات المنظور أو التصورات التفاعلية التي تستجيب إلى طريقة حمل الهاتف.

يُعلمك IntersectionObserver بوقت دخول عنصر إلى إطار العرض أو مغادرته. ويمكنك تغليفه بحيث تنشئ subscribe المراقب، وتعيد getSnapshot أحدث قيمة لـ isIntersecting.

يوفر ذلك مؤشر isVisible تفاعليًا لتحميل الصور كسولًا، أو تشغيل الرسوم المتحركة، أو تنفيذ علامات التمرير اللانهائي.

يُبلغ ResizeObserver عن تغيّرات حجم العنصر. ويتيح تغليفه لـ subscribe مراقبة عنصر، ولـ getSnapshot إعادة أبعاده الحالية، بحيث تستجيب المكوّنات لتغيّرات التخطيط بدقة.

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

يمكنك دمج حدث تغيير الحجم مع الوصلة لبناء useWindowSize تعيد العرض والارتفاع الحاليين. وتضيف subscribe مستمعًا لتغيير الحجم، بينما تقرأ getSnapshot أبعاد window.

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

حلّل كيفية استخدام وصلة useMediaQuery لوصلة المخزن.

تُعد واجهات برمجة كثيرة في المتصفح مخازن خارجية يمكنك ربطها باستخدام useSyncExternalStore: إذ يُستخدم matchMedia لنقاط التوقف، وnavigator.onLine للاتصال، وlocation وstorage للتنقل والمزامنة بين علامات التبويب، بالإضافة إلى مراقبات الاتجاه والتقاطع وتغيير الحجم.

يتبع كل منها البنية نفسها: subscribe تضيف المستمعين وتزيلهم، وgetSnapshot مستقرة. ويمكن تركيبها في وصلات مثل useMediaQuery وuseOnlineStatus وuseWindowSize.