component-refactoring
Refactoriser les Composants React Complexes
Les composants React complexes deviennent difficiles à tester et à maintenir. Cette compétence fournit des modèles et des flux de travail pour refactoriser les composants à haute complexité en extrayant des hooks, en divisant les sous-composants et en appliquant les conventions spécifiques à 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:
Analyse de Complexité:
- Complexité Totale: 72 (cible: <50)
- Complexité Max de Fonction: 28
- Nombre de Lignes: 420 (cible: <300)
Principaux Facteurs de Complexité:
1. handleSubmit callback: +15 complexité (conditions imbriquées)
2. useEffect pour sync données: +12 complexité (callbacks imbriqués)
3. méthodes render: +10 complexité (chaînes switch/case)
Actions Recommandées:
1. Extraire le hook useWorkflowState
2. Diviser la gestion de formulaire en composant séparé
3. Déplacer la logique de sync données vers un hook useEffect
Utilisation de "component-refactoring". Extract hooks from ConfigurationForm component
Résultat attendu:
Hooks Extraits:
- useModelConfig: Gère l'état de configuration du modèle
- useDatasetSelection: Gère la logique du sélecteur de dataset
- useFormValidation: Logique de validation de formulaire
Structure de Fichiers:
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
Réduire la Complexité des Composants
Lorsqu'un composant React dépasse le seuil de complexité (>50) ou le nombre de lignes (>300), utilisez cette compétence pour réduire systématiquement la complexité par l'extraction de hooks et le découpage de composants.
Standardiser les Modèles de Hooks
Appliquer les conventions Dify pour organiser les hooks personnalisés dans les sous-répertoires hooks/ ou aux côtés des composants avec la convention de nommage use- prefix.
Préparer les Composants pour les Tests
Refactoriser les composants complexes avant d'écrire des tests pour garantir que les composants sont testables et respectent les seuils de complexité.
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
- Exécuter l'analyse de complexité avant la refactorisation pour établir des métriques de base
- Extraire les hooks tôt lorsque la gestion d'état dépasse 3-5 appels useState
- Suivre les conventions de nommage Dify: hooks dans le répertoire hooks/ ou avec le préfixe use-*.ts
Éviter
- Refactoriser des composants qui respectent déjà les seuils de complexité inutilement
- Extraire des hooks qui ne sont utilisés que dans un seul composant (préférer inline)
- Créer trop de petits composants qui nuisent à la navigation dans le code