YYY920/video-ops-skill

Schreiben von React-Komponenten

Wir verwenden modernes React (19+) und befolgen gemeinsame Best Practices, die sich auf Klarheit, Korrektheit und Wartbarkeit konzentrieren.

Komponentenstruktur und Stil

• BEVORZUGEN Sie kleine, fokussierte Komponenten mit einer einzigen Verantwortung
• BEVORZUGEN Sie benannte function-Komponenten gegenüber Pfeilfunktionen
  • Ausnahme: anonyme Callbacks, Inline-Render-Props und Closures
• BEVORZUGEN Sie explizite Rückgabetypen und Props-Typisierung (TypeScript), wo anwendbar
• Halten Sie Komponenten flach und lesbar; vermeiden Sie tief verschachteltes JSX
• Gruppieren Sie zusammengehörige Logik (Event-Handler, abgeleitete Werte, Hilfsfunktionen)

State-Management

• VERMEIDEN Sie useEffect()
  • Siehe den Leitfaden "You Might Not Need An Effect" für detaillierte Anleitung
  • BEVORZUGEN Sie das Ableiten von Werten während des Renderings anstatt State zu synchronisieren
  • Daten mittels TanStack Query (@tanstack/react-query) abrufen
• VERMEIDEN Sie unnötiges useState() oder useReducer()
  • Leiten Sie State aus Props oder anderem State ab, wenn möglich
  • Lokalisieren Sie State auf die niedrigstmögliche Komponente
• NICHT Props in State spiegeln, es sei denn, es ist absolut notwendig
• Bevorzugen Sie kontrollierte Komponenten gegenüber der Synchronisierung von unkontrolliertem State

Rendering und Ableitung

• BEVORZUGEN Sie das Berechnen abgeleiteter Werte inline oder über Hilfsfunktionen
• Verwenden Sie useMemo() sparsam und nur bei nachgewiesenen Leistungsproblemen
• VERMEIDEN Sie vorzeitige Optimierung
• Halten Sie die Rendering-Logik deterministisch und frei von Seiteneffekten

Event-Handling

• VERMEIDEN Sie Inline-Event-Handler in JSX

  • BEVORZUGEN Sie:

    function handleClick() {
      // ...
    }
    
    <button onClick={handleClick} />;
    

  • Statt:

    <button
      onClick={() => {
        /* ... */
      }}
    />
    

• Benennen Sie Handler klar (handleSubmit, handleChange, handleClose)

• Halten Sie Handler klein; extrahieren Sie komplexe Logik in Hilfsfunktionen

Effekte, Daten und Seiteneffekte

• VERMEIDEN Sie Effekte für:
  • Abgeleiteten State
  • Datentransformationen
  • Ereignisbasierte Logik, die in Handlern leben kann
• Wenn Seiteneffekte unvermeidbar sind, halten Sie sie minimal, isoliert und gut dokumentiert
• Bevorzugen Sie Framework-Level- oder externe Abstraktionen (Router, Datenbibliotheken) gegenüber rohen Effekten

Props und Komposition

• BEVORZUGEN Sie Komposition gegenüber Konfiguration
• VERMEIDEN Sie übermäßige boolesche Props; bevorzugen Sie ausdrucksstarke APIs
• Verwenden Sie children absichtlich und dokumentieren Sie die erwartete Struktur
• Halten Sie Prop-Namen semantisch und vorhersagbar

Leistung und Stabilität

• BEVORZUGEN Sie stabile Referenzen nur, wenn erforderlich (nicht standardmäßig)
• VERMEIDEN Sie unnötige Memoization (memo, useCallback), es sei denn, es ist absolut notwendig
• Halten Sie Keys stabil und aussagekräftig beim Rendern von Listen

Allgemeine Prinzipien

• Schreiben Sie Code für Menschen zuerst, Compiler zweitens
• Bevorzugen Sie Explizitheit gegenüber Cleverness
• Optimieren Sie auf Lesbarkeit und langfristige Wartbarkeit
• Wenn ein Muster komplex erscheint, überdenken Sie die Komponentengrenzen