component-refactoring
Komplexe React-Komponenten refaktorieren
Komplexe React-Komponenten werden schwer zu testen und zu warten. Diese Skill bietet Muster und Workflows zur Refaktorierung von hochkomplexen Komponenten durch Extrahieren von Hooks, Aufteilen von Unterkomponenten und Anwenden Dify-spezifischer Konventionen.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "component-refactoring". Analyze complexity of web/app/components/workflow/index.tsx
النتيجة المتوقعة:
Complexity Analysis:
- Total Complexity: 72 (target: <50)
- Max Function Complexity: 28
- Line Count: 420 (target: <300)
Top Complexity Drivers:
1. handleSubmit callback: +15 complexity (nested conditions)
2. useEffect for data sync: +12 complexity (nested callbacks)
3. render methods: +10 complexity (switch/case chains)
Recommended Actions:
1. Extract useWorkflowState hook
2. Split form handling into separate component
3. Move data sync logic to useEffect hook
استخدام "component-refactoring". Extract hooks from ConfigurationForm component
النتيجة المتوقعة:
Extracted Hooks:
- useModelConfig: Manages model configuration state
- useDatasetSelection: Handles dataset picker logic
- useFormValidation: Form validation logic
File Structure:
web/app/components/form/
hooks/
use-model-config.ts
use-dataset-selection.ts
use-form-validation.ts
ConfigurationForm.tsx
index.ts
التدقيق الأمني
آمنThis 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.
درجة الجودة
ماذا يمكنك بناءه
Komplexität der Komponente reduzieren
Wenn eine React-Komponente den Komplexitätsschwellenwert (>50) oder die Zeilenanzahl (>300) überschreitet, verwenden Sie diese Skill, um die Komplexität systematisch durch Hook-Extraktion und Komponentenaufteilung zu reduzieren.
Hook-Muster standardisieren
Wenden Sie Dify-Konventionen für die Organisation benutzerdefinierter Hooks in hooks/-Unterverzeichnissen oder neben Komponenten mit use- Präfix-Namensgebung an.
Komponenten für Tests vorbereiten
Refaktorieren Sie komplexe Komponenten vor dem Schreiben von Tests, um sicherzustellen, dass die Komponenten testbar sind und Komplexitätsschwellenwerte erfüllen.
جرّب هذه الموجهات
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.
أفضل الممارسات
- Führen Sie die Komplexitätsanalyse vor der Refaktorierung durch, um Baseline-Metriken zu etablieren
- Extrahieren Sie frühzeitig Hooks, wenn das State-Management 3-5 useState-Aufrufe überschreitet
- Folgen Sie Dify-Namenskonventionen: Hooks im hooks/ Verzeichnis oder use-*.ts Präfix
تجنب
- Refaktorierung von Komponenten, die bereits Komplexitätsschwellenwerte erfüllen, ohne Notwendigkeit
- Extrahieren von Hooks, die nur in einer einzelnen Komponente verwendet werden (besser inline)
- Erstellen zu vieler kleiner Komponenten, die die Code-Navigation erschweren