react-patterns
Maîtrisez les modèles de développement React et les meilleures pratiques
Construisez des applications React prêtes pour la production en toute confiance. Apprenez des modèles éprouvés pour les hooks, la gestion d'état et la conception de composants.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "react-patterns". Quand dois-je utiliser Context versus un magasin global comme Zustand ?
النتيجة المتوقعة:
Utilisez Context pour l'état partagé local dans un sous-arbre de composants comme le thème ou la locale. Utilisez Zustand pour l'état applicatif qui nécessite devtools, persistance, ou est accédé par de nombreux composants non apparentés. Context est intégré mais peut causer des re-renders ; Zustand offre de meilleures performances pour les mises à jour fréquentes.
استخدام "react-patterns". Est-ce que cet useEffect est nécessaire pour fetch des données au mount ?
النتيجة المتوقعة:
Dans React 19, préférez les server components ou des librairies de data-fetching comme React Query plutôt que useEffect pour le fetch de données. useEffect est approprié pour les subscriptions ou les effets de bord non-données. Pour les données, utilisez des librairies qui gèrent automatiquement le caching, la déduplication et les états d'erreur.
التدقيق الأمني
آمنAll 6 static analyzer findings are false positives. The SKILL.md file is educational documentation about React patterns, not executable code. Pattern matches on words like 'useLocalStorage' and section headings triggered false alarms. No actual security risks detected.
درجة الجودة
ماذا يمكنك بناءه
Intégration de développeurs React
Aidez les nouveaux membres de l'équipe à apprendre rapidement vos modèles d'architecture React et vos standards de codage.
Guidance de refactoring de composants
Obtenez des recommandations pour décomposer les grands composants et appliquer des modèles de hooks appropriés.
Décisions de gestion d'état
Déterminez la bonne solution d'état de useState aux magasins globaux selon vos besoins.
جرّب هذه الموجهات
Expliquez quand extraire un hook personnalisé en React. Montrez le modèle useLocalStorage avec un exemple de code.
Revoyez ce composant React et suggérez des améliorations basées sur les principes de conception de composants. Identifiez s'il doit être divisé en composants plus petits.
J'ai une application avec authentification utilisateur, préférences de thème et notifications en temps réel. Recommandez une approche de gestion d'état et expliquez pourquoi.
Expliquez comment le compilateur React 19 affecte les modèles de mémoïsation. Montrez quels appels useMemo et useCallback peuvent être supprimés.
أفضل الممارسات
- Profilez les performances avant d'optimiser - mesurez d'abord les goulots réels
- Préférez la composition à l'héritage - construisez des composants petits et ciblés
- Utilisez des clés uniques stables au lieu des indices de tableau pour le rendu de listes
تجنب
- Prop drilling profond - utilisez Context ou la composition de composants à la place
- Composants géants avec de multiples responsabilités - divisez-les en unités plus petites
- Tout faire avec useEffect - exploitez les server components quand c'est approprié