component-refactoring
إعادة هيكلة مكونات React المعقدة
تصبح مكونات React المعقدة صعبة الاختبار والصيانة. توفر هذه المهارة أنماطاً وسير عمل لإعادة هيكلة المكونات عالية التعقيد من خلال استخراج الـ hooks وتقسيم المكونات الفرعية وتطبيق اصطلاحات Dify المحددة.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "component-refactoring". Analyze complexity of web/app/components/workflow/index.tsx
Résultat attendu:
تحليل التعقيد:
- إجمالي التعقيد: 72 (الهدف: <50)
- أقصى تعقيد للدالة: 28
- عدد الأسطر: 420 (الهدف: <300)
محركات التعقيد الرئيسية:
1. استدعاء handleSubmit: +15 تعقيد (شروط متداخلة)
2. useEffect لمزامنة البيانات: +12 تعقيد (استدعاءات متداخلة)
3. طرق العرض: +10 تعقيد (سلاسل switch/case)
الإجراءات الموصى بها:
1. استخراج useWorkflowState hook
2. تقسيم معالجة النموذج إلى مكون منفصل
3. نقل منطق مزامنة البيانات إلى useEffect hook
Utilisation de "component-refactoring". Extract hooks from ConfigurationForm component
Résultat attendu:
الـ Hooks المستخرجة:
- useModelConfig: يدير تكوين النموذج
- useDatasetSelection: يتعامل مع منطق منتقي مجموعات البيانات
- useFormValidation: منطق التحقق من النموذج
هيكل الملف:
web/app/components/form/
hooks/
use-model-config.ts
use-dataset-selection.ts
use-form-validation.ts
ConfigurationForm.tsx
index.ts
Audit de sécurité
SûrThis is a documentation and guidance skill for React component refactoring. Static analyzer flagged 214 potential issues in markdown documentation files, all of which are false positives: backticks in code examples were detected as shell commands, code patterns triggered crypto/blocker alerts, and Object.keys() was flagged as certificate/key files. The skill provides reference documentation only and does not execute any code.
Score de qualité
Ce que vous pouvez construire
تقليل تعقيد المكونات
عندما يتجاوز مكون React حد التعقيد (>50) أو عدد الأسطر (>300)، استخدم هذه المهارة لتقليل التعقيد بشكل منهجي من خلال استخراج الـ hooks وتقسيم المكونات.
توحيد أنماط الـ Hooks
تطبيق اصطلاحات Dify لتنظيم hooks المخصصة في مجلدات hooks/ الفرعية أو بجانب المكونات مع تسمية use- البادئة.
تحضير المكونات للاختبار
إعادة هيكلة المكونات المعقدة قبل كتابة الاختبارات لضمان قابلية الاختبار والالتزام بحدود التعقيد.
Essayez ces prompts
Check the complexity of web/app/components/example.tsx using pnpm analyze-component. What is the complexity score and what are the main complexity drivers?
Analyze web/app/components/form-config/index.tsx and identify opportunities to extract custom hooks. Show me the proposed hook structure with Dify conventions.
The Configuration component at web/app/components/config/index.tsx has complexity 85. Suggest how to split it into sub-components while maintaining Dify patterns.
Run pnpm analyze-component on web/app/components/app/configuration/index.tsx and generate a complete refactoring plan including hook extractions, sub-component splits, and complexity reduction targets.
Bonnes pratiques
- قم بتشغيل تحليل التعقيد قبل إعادة الهيكلة لإنشاء مقاييس أساسية
- استخرج الـ hooks مبكراً عندما تتجاوز إدارة الحالة 3-5 استدعاءات useState
- اتبع اصطلاحات التسمية في Dify: hooks في مجلد hooks/ أو بادئة use-*.ts
Éviter
- إعادة هيكلة المكونات التي تستوفي بالفعل حدود التعقيد دون ضرورة
- استخراج الـ hooks المستخدمة في مكون واحد فقط (يفضل السطر المضمن)
- إنشاء太多的小组件 التي تضر التنقل في الكود