أساسيات React.memo والمقارنة السطحية
اكتشف كيف يتصرف React.memo داخل React 19's concurrent renderer ولماذا تعمل البيانات المشتقة غير المستقرة على تحييد المقارنة السطحية، مما يؤدي إلى انهيار حدود memo.
React.memoليس هذا بالأمر الجديد، لكن أهميته تتغير في React 19. في أنظمة العرض المتزامن القديمة، كان "العرض المُهدر" يُكلفك مرة واحدة فقط لكل تحديث. أما في React 19، فالعرض تخميني؛ إذ يمكن لشجرة فرعية من المكون أن تبدأ العرض، أو تتوقف مؤقتًا، أو تُعيد التشغيل، أو حتى تُعيد العرض عدة مرات قبل أن يُثبتها React على الشاشة.
هذا يعني أن الخصائص غير المستقرة، مثل الكائنات أو المصفوفات التي يُعاد إنشاؤها في كل عملية عرض، تُضاعف العمل الضائع. كل عملية عرض تخمينية تُعيد حساب منطق المكون. باستخدامReact.memo يساعد ذلك، لكنه لا ينجح إلا إذا ظلت هويات العناصر ثابتة عبر عمليات العرض.
منطق المقارنة السطحي
تعتمد خطة الإنقاذ هذه على مقارنة سطحية باستخدامObject.is الطريقة. تتبع المقارنة تسلسلاً صارماً:
تأكد من تطابق عدد مفتاح الخاصية.
قارن كل مفتاح مرجعيًا لكل مفتاح، تحقق
prev[key]مقابلnext[key].الإيقاف عند عدم التطابق: إذا فشل أي مفتاح
Object.isتحقق، يقوم React بإعادة عرض المكون.تخطي عملية العرض إذا تطابقت جميع المفاتيح: لا يتوقف React عن العمل ويتخطى عملية العرض إلا عندما تتطابق جميع المفاتيح.
يجعل هذا القيد التصميمي استقرار الهوية شاغلًا معماريًا أساسيًا. يفشل كل من الكائن الحرفي الجديد، والمصفوفة المضمنة، والقائمة المشتقة المُخصصة حديثًا في المقارنة السطحية، حتى عندما تكون المحتويات متطابقة. في ظل العرض المتزامن React 19، حيث قد يُعاد عرض العنصر الأب عدة مرات قبل الالتزام، ينتقل عدم استقرار المرجعية هذا عبر حدود الذاكرة المؤقتة ويُجبر العنصر الابن على إعادة العرض بشكل متكرر. لا تكمن المشكلة فيReact.memo إنها البنية التي تغذيها بمدخلات غير مستقرة.
تعمل المقارنة السطحية كحلقة خروج مبكر. يؤدي أول اختلاف في المرجع إلى اعتبار React للمقارنة فاشلة. لا يتحقق React أبدًا من داخل حقول الكائن، ويكفي وجود اختلاف مرجعي واحد. أي مرجع غير مستقر، مثل مصفوفة جديدة، أو كائن جديد، أو دالة رد نداء مضمنة، أو حالة مشتقة يتم إعادة إنشائها في كل عملية عرض، يؤدي إلى انهيار حدود الذاكرة المؤقتة. في بيئة متزامنة ذات تمريرات تخمينية متعددة، يتكرر هذا الانهيار في جميع محاولات العرض، مما يزيد من إجمالي العمل.
مثال: الهوية المشتقة، وعروض الضوضاء، وحدود المذكرة
يوضح هذا المثال كيفReact.memo يمكن حظر تحديثات "الضوضاء" من الأصل فقط عندما تكون البيانات المشتقة التي يتلقاها ذات هوية مستقرة، وكيف أن ...