دراسة حالة: لوحة معلومات الثروة الحيوانية الحية (الجزء الثاني)

في الدرس السابق، قمنا بتقليل تكلفة كل عملية عرض باستخدامReact.memo وuseMemo ومع ذلك، لم نخفض وتيرة الإبطال.DashboardProvider لا يزال يُصدر بثًا كاملاً كل 200 مللي ثانية. وطالما أن تدفق البيانات لا يزال قائمًا على الدفع، يجب على مُجدول React الاستمرار في إعادة عرض المكونات التي لا تحتاج فعليًا إلى تحديث.

بنية التحديث القائمة على الأولوية

للوصول60fps تحت ضغط مستمر، نعكس تدفق البيانات ونتحول إلى ما نسميه بنية المسار السريع:

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

  • نتيجة :

    • TickerPanel لا يحصل إلا على شريحة الأسعار المباشرة.

    • AnalyticsPanel لا تتلقى سوى حصتها المشتقة.

    • لا تتلقى مكونات الهيكل أي شيء ولا يتم إعادة عرضها مطلقًا.

  • يقارن React إخراج المحدد بالمخرجات السابقة قبل العرض؛ إذا تطابقت، يتم تخطي العرض بالكامل، حتى في حالة إعادة التشغيل المتزامنة.

• طبقة التفاعل (المسار العاجل مقابل مسار الانتقال): تظل عمليات حساب التحليلات مُرهقة؛ حيث تستغرق كل عملية تغيير وقتًا من رتبة O(n). لا يُمكننا تسريع العمليات الحسابية، ولكن يُمكننا هيكلة مسار البيانات بحيث تظل واجهة المستخدم سريعة الاستجابة. تغليف التحديثات التي يُجريها المستخدم (الفلاتر، الفرز) فيstartTransition يخبر React:

  • قم بتحديث إدخال فوراً (مسار عاجل). أعد حساب التحليلات لاحقاً (مسار انتقالي).

  • يمكن لـ React 19 الآن تأجيل أو مقاطعة أو إعادة تشغيل العمليات الحسابية المعقدة دون حظر ضغطات المفاتيح أو التمرير.

التعليق: تحديثات المتجر عالية التردد تغذي المحددات الذرية، بينما تعمل العمليات الحسابية الثقيلة في مسار انتقالي دون إعاقة عمل واجهة المستخدم العاجل.

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

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

بعد تحديد هذه البنية، دعونا نُنفذ المخزن الخارجي ونستبدل سياق البث الخاص بنا باشتراكات قائمة على المُحددات تعزل التحديثات وتُفعّل التزامن صحيح React 19. في الإصدار السابق،AnalyticsPanel مشترك مباشرة فيstate.stocks وحلقة التوقيت تحل محل الحلقة بأكملهاstocks يتم إنشاء المصفوفة كل 200 مللي ثانية، لذا:

• المحدد: (s) => s.stocks

• النتيجة: مصفوفة جديدة في كل دورة →Object.is(prev, next) يكون false

• تأثير:AnalyticsPanel يعيد عرض كل دورة → هذا بالضبط سلوك "البث المتجانس" الذي نحاول الهروب منه.

لذا دعونا نصلح هذا بشكل صحيح ونحدث الجزء الثاني ليعكس البنية التي كنا ...