تصحيح الأخطاء واستكشاف المشكلات

يساعدك هذا الدليل في تحديد مشكلات React Compiler وإصلاحها. تعلم كيفية تصحيح مشكلات التجميع وحل المشكلات الشائعة.

فهم سلوك المترجم

تم تصميم React Compiler للتعامل مع الكود الذي يتبعقواعد React. عندما يواجه كودًا قد يكسر هذه القواعد، فإنه يتخطى التحسين بأمان بدلاً من المخاطرة بتغيير سلوك تطبيقك.

أخطاء المترجم مقابل مشكلات وقت التشغيل

أخطاء المترجمتحدث في وقت البناء وتمنع كودك من التجميع. هذه الأخطاء نادرة لأن المترجم مصمم لتخطي الكود المشكل بدلاً من الفشل.

مشكلات وقت التشغيلتحدث عندما يتصرف الكود المترجم بشكل مختلف عما هو متوقع. في معظم الأحيان، إذا واجهت مشكلة مع React Compiler، فهي مشكلة وقت تشغيل. يحدث هذا عادةً عندما ينتهك كودك قواعد React بطرق خفية لم يتمكن المترجم من اكتشافها، وقام المترجم عن طريق الخطأ بتجميع مكون كان يجب أن يتخطاه.

عند تصحيح مشكلات وقت التشغيل، ركز جهودك على العثور على انتهاكات لقواعد React في المكونات المتأثرة التي لم يتم اكتشافها بواسطة قاعدة ESLint. يعتمد المترجم على اتباع كودك لهذه القواعد، وعندما يتم كسرها بطرق لا يستطيع اكتشافها، تحدث مشكلات وقت التشغيل.

الأنماط الشائعة المسببة للمشكلات

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

السيناريوهات الشائعة التي يحدث فيها هذا:

• التأثيرات التي تعتمد على المساواة المرجعية- عندما تعتمد التأثيرات على الحفاظ على الكائنات أو المصفوفات على نفس المرجع عبر عمليات التصيير
• مصفوفات التبعية التي تحتاج إلى مراجع مستقرة- عندما تسبب التبعيات غير المستقرة تشغيل التأثيرات كثيرًا أو إنشاء حلقات لا نهائية
• المنطق الشرطي المستند إلى فحوصات المرجع- عندما يستخدم الكود فحوصات المساواة المرجعية للتخزين المؤقت أو التحسين

سير عمل تصحيح الأخطاء

اتبع هذه الخطوات عند مواجهة المشكلات:

أخطاء بناء المترجم

إذا واجهت خطأ في المترجم يكسر بناءك بشكل غير متوقع، فمن المحتمل أن يكون هذا خطأ في المترجم. أبلغ عنه إلى مستودعfacebook/react مع:

• رسالة الخطأ
• الكود الذي تسبب في الخطأ
• إصدارات React والمترجم الخاصة بك

مشكلات وقت التشغيل

لمشكلات سلوك وقت التشغيل:

1. تعطيل التجميع مؤقتًا

استخدم"use no memo"لعزل ما إذا كانت المشكلة متعلقة بالمترجم:

إذا اختفت المشكلة، فمن المحتمل أن تكون مرتبطة بانتهاك لقواعد React.

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

2. إصلاح المشكلات خطوة بخطوة

1. تحديد السبب الجذري (غالبًا التخزين المؤقت من أجل الصحة)
2. الاختبار بعد كل إصلاح
3. إزالة"use no memo"بمجرد الإصلاح
4. التحقق من ظهور شارة ✨ للمكون في React DevTools

الإبلاغ عن أخطاء المترجم

إذا كنت تعتقد أنك وجدت خطأ في المترجم:

1. تأكد من أنها ليست مخالفة لقواعد React- تحقق باستخدام ESLint
2. أنشئ مثالًا مصغرًا قابلًا للتكرار- عزل المشكلة في مثال صغير
3. اختبر بدون المترجم- تأكد من أن المشكلة تحدث فقط مع الترجمة
4. قدممشكلة:
   • إصدارات React والمترجم
   • كود مثال مصغر قابل للتكرار
   • السلوك المتوقع مقابل الفعلي
   • أي رسائل خطأ

الخطوات التالية

• راجعقواعد Reactلمنع المشكلات
• تحقق مندليل التبني التدريجيلاستراتيجيات النشر التدريجي