Search⌘ K
AI Features

المحددات والتفاعل الدقيق

استخدم المخازن الخارجية مع الاشتراكات القائمة على المحددات، بدلاً من الاعتماد فقط على تجزئة السياق، لتحقيق تحديثات دقيقة وثابتة الوقت في ظل نموذج العرض المتزامن لـ React 19.

يُعزل تجزئة السياق التحديثات حسب المجال، لكنه لا يعزل التحديثات داخل ذلك المجال. هذا القيد يُنشئ فجوة في الانتقائية. عندما يُوفر السياق{ A, B } ، وهو مكون لا يحتاج إلاA لا يزال يتعين إعادة العرض عندB تتغير هذه التغييرات لأن السياق لا يحتوي على آلية اختيار أصلية. في ظل التزامن في React 19، حيث يمكن إعادة تشغيل عمليات العرض أو مقاطعتها أو إلغاؤها، تصبح هذه الفجوة مكلفة للغاية. كل تحديث للسياق يُجبر على إبطال واسع النطاق، وقد ينتهي الأمر React إلى إعادة تشغيل هذا العمل المُبطل عدة مرات قبل إجراء عملية الالتزام.

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

التفاعل الدقيق

الحل المتقدم هو الخروج من شجرة React . useSyncExternalStoreتُمكّن تقنية (uSES) المكونات من الاشتراك في شريحة الحالة التي تعتمد عليها تحديدًا. فبدلًا من أن يقوم React بإرسال التحديثات إلى كل مستخدم، تقوم المكونات "بسحب" البيانات التي تحتاجها فعليًا عبر دوال مُحدِّدة مُوجزة. يُعيد React تشغيل المُحدِّد عندما يُبلغ المتجر عن تغيير؛ وإذا كان إخراج المُحدِّد مستقرًا مرجعيًا، يتخطى React المكون قبل بدء مرحلة العرض. وهذا يُحقق تفاعلية دقيقة: فتحديث الحقل X يُعيد عرض المكونات التي يعتمد مُحدِّدها فقط.X ، توصيلO(1) حتى في ظل العرض التخميني لـ React 19، يصبح الأمر غير صالح.

Context push vs. selector pull
Context push vs. selector pull

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

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

الاشتراكات القائمة على السياق مقابل الاشتراكات القائمة على المحددات

تؤدي تحديثات السياق دائمًا إلى إبطال جميع المستهلكين، بينما تعيد الاشتراكات ...