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