تصبح قواعد الكود القديمة لـ React صيانة صعبة وتفقد تحسينات الأداء. يرشدك هذا المهارة عبر ترقيات الإصدارات، والانتقال إلى hooks، وتبني ميزات React 18 المتزامنة.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "react-modernization". مكون class مع componentDidMount وsetState
النتيجة المتوقعة:
مكون functional يستخدم useState للحالة وuseEffect مع مصفوفة تبعية فارغة لمنطق التثبيت، ودالة تنظيف لإلغاء التثبيت
استخدام "react-modernization". استدعاء ReactDOM.render في React 17
النتيجة المتوقعة:
واجهة createRoot في React 18 مع تحديد عنصر الحاوية المناسب وإعداد حد الخطأ
استخدام "react-modernization". تحديثات حالة متزامنة في معالج الأحداث
النتيجة المتوقعة:
تحديثات حالة مغلفة بـ Transition لتغييرات واجهة المستخدم غير العاجلة مع مؤشر التحميل isPending
التدقيق الأمني
آمنStatic analyzer flagged 48 patterns but all are false positives. This skill contains documentation-only markdown files with React code examples. Dynamic imports are standard React lazy() patterns, shell commands are documentation for codemod usage, and fetch calls are example code snippets. No executable code exists in this skill.
درجة الجودة
ماذا يمكنك بناءه
ترقية تطبيق React القديم
ترقية تطبيق React 16 أقدم إلى React 18 مع التجميع التلقائي والميزات المتزامنة
الانتقال من Class إلى Hooks
تحويل مكونات class مع طرق دورة الحياة إلى مكونات functional حديثة باستخدام useState وuseEffect
تحسين الأداء
تنفيذ تقسيم الكود، والتذكر، وحدود Suspense لأداء محسن للتطبيق
جرّب هذه الموجهات
حول مكون React class هذا لاستخدام hooks. حدد متغيرات الحالة وطرق دورة الحياة للتحويل إلى useState وuseEffect.
حلل قاعدة كود React الخاصة بي للبحث عن التغييرات الكبيرة عند الترقية من React 17 إلى 18. أدرج جميع الملفات التي تحتاج تعديلات وقدم قائمة تحقق بالترحيل.
أنشئ أوامر لتشغيل React codemods لمشروعي. ضمّن تثبيت jscodeshift، والتحويلات المحددة لطرق دورة الحياة، وتحويل JSX الجديد.
أعد صياغة مكون البحث هذا لاستخدام useTransition للتحديثات غير العاجلة. أظهر كيفية تنفيذ حدود Suspense لجلب البيانات مع حالات تحميل مناسبة.
أفضل الممارسات
- ترحيل تدريجيًا بدءًا من مكونات leaf التي لا تحتوي على أطفال
- تشغيل اختبارات شاملة بعد كل خطوة ترحيل للكشف عن التراجعات مبكرًا
- استخدام React StrictMode لتحديد الأنماط غير الآمنة والآثار الجانبية أثناء التطوير
تجنب
- إضافة useMemo أو useCallback دون قياس مشاكل الأداء الفعلية
- نسيان تضمين جميع التبعية في مصفوفات تبعية useEffect
- خلط أنماط مكونات class مع hooks في نفس المكون