Zwei Lektionen, die ich beim Erstellen von React Komponenten gelernt habe

Hier sind ein paar Lektionen, die ich beim Erstellen von React-Komponenten gelernt habe, wie man es *nicht* tut. Das sind Dinge, auf die ich in den letzten Monaten gestoßen bin und von denen ich dachte, sie könnten für Sie interessant sein, wenn Sie an einem Designsystem arbeiten, insbesondere an einem mit vielen technischen Altentscheidungen und viel technischer Schuld im Hintergrund.

Lektion 1: Vermeiden Sie Kindkomponenten, so gut Sie können

Eine Sache bei der Arbeit an einem großen Designsystem mit vielen Komponenten ist, dass das folgende Muster sehr schnell problematisch wird.

<Card>
  <Card.Header>Title</Card.Header>
  <Card.Body><p>This is some content</p></Card.Body>
</Card>

Die problematischen Teile sind diese Kindkomponenten, Card.Body und Card.Header. Dieses Beispiel ist nicht schlimm, da die Dinge relativ einfach sind – es wird verrückt, wenn Komponenten komplexer werden. Zum Beispiel kann jede Kindkomponente eine ganze Reihe komplexer Props haben, die miteinander interferieren.

Einer meiner größten Schmerzpunkte sind unsere Formular-Komponenten. Nehmen Sie das hier

<Form>
  <Input />
  <Form.Actions>
    <Button>Submit</Button>
    <Button>Cancel</Button>
  </Form.Actions>
</Form>

Ich vereinfache die Dinge natürlich erheblich, aber jedes Mal, wenn ein Ingenieur zwei Buttons nebeneinander platzieren möchte, importiert er Form.Actions, auch wenn keine Form auf der Seite vorhanden ist. Das bedeutete, dass alles innerhalb der Form-Komponente importiert wurde, was letztendlich schlecht für die Leistung ist. Es stellt sich auch als schlechte Systemdesign-Implementierung heraus.

Das macht die Dokumentation von Komponenten auch extra schwierig, da Sie dann sicherstellen müssen, dass jede dieser Kindkomponenten ebenfalls dokumentiert wird.

Anstatt also Form.Actions zu einer Kindkomponente zu machen, hätten wir sie zu einer brandneuen Komponente machen sollen, einfach: FormActions (oder vielleicht etwas mit einem besseren Namen wie ButtonGroup). Auf diese Weise müssen wir Form nicht ständig importieren und können layoutbasierte Komponenten von anderen trennen.

Ich habe meine Lektion gelernt. Von nun an werde ich Kindkomponenten, wo immer ich kann, komplett vermeiden.

Lektion 2: Stellen Sie sicher, dass Ihre Props nicht miteinander kollidieren

Mandy Michael hat einen großartigen Artikel darüber geschrieben, wie Props aufeinanderprallen können und zu verwirrenden Konflikten führen können, wie dieses TypeScript-Beispiel.

interface Props {
  hideMedia?: boolean
  mediaIsEdgeToEdge?: boolean
  mediaFullHeight?: boolean
  videoInline?: boolean
}

Mandy schreibt

Der Zweck dieser Props ist es, die Art und Weise zu ändern, wie das Bild oder Video in der Karte gerendert wird, oder ob das Medium überhaupt gerendert wird. Das Problem bei der separaten Definition ist, dass man am Ende eine Reihe von Flags hat, die Komponentenfunktionen umschalten, von denen viele sich gegenseitig ausschließen. Zum Beispiel kann man kein Bild haben, das die Ränder ausfüllt, wenn es auch versteckt ist.

Dies war definitiv ein Problem für viele der Komponenten, die wir in den Designsystemen meines Teams geerbt haben. Es gab eine Reihe von Komponenten, bei denen boolesche Props eine Komponente auf allerlei seltsame und unerwartete Weise verhalten ließen. Wir hatten sogar alle möglichen Fehler in unserer Card-Komponente während der Entwicklung, weil die Ingenieure nicht wussten, welche Props sie für einen bestimmten Effekt ein- und ausschalten sollten!

Mandy schlägt folgende Lösung vor

type MediaMode = 'hidden'| 'edgeToEdge' | 'fullHeight'

interface Props {
  mediaMode: 'hidden'| 'edgeToEdge' | 'fullHeight'
}

Kurz gesagt: Wenn wir all diese aufkeimenden Optionen kombinieren, haben wir eine viel sauberere API, die leicht erweiterbar ist und weniger wahrscheinlich zu Verwirrung in der Zukunft führt.

---

Das war's! Ich wollte nur eine kurze Notiz zu diesen beiden Lektionen machen. Hier ist meine Frage an Sie: Was haben Sie beim Erstellen von Komponenten oder bei der Arbeit an Designsystemen gelernt?