Rendering: wie aus Änderung Pixel werden

Ein Zähler, der funktioniert, wirkt etwa einen Tag lang wie Magie. Dann fügst du eine Liste auf der Seite hinzu, die Zeilen verhalten sich seltsam, und die Magie wird zur Frage: Was genau passiert zwischen dem Klick und den neuen Pixeln?

Zuerst klären wir das Wort. Neuladen bedeutet, dass der Browser die Seite wegwirft und alles erneut vom Server anfordert: ein neues Dokument, neue Elemente, und jeder Zustand, den du hattest, ist weg. Ein erneutes Rendering ist nichts dergleichen. Die Seite bleibt, der Browser-Tab bleibt, und die Komponentenfunktionen laufen erneut, um eine frische Beschreibung der Schnittstelle zu erzeugen. Niemand spricht mit dem Server, außer dein Code fragt nach Daten.

Genau deshalb schreibt man die Schnittstelle als Funktion des Zustands. Du beschreibst nicht den Übergang vom alten zum neuen Bildschirm. Du beschreibst, wie der Bildschirm für die aktuellen Daten aussehen soll, und überlässt es dem Framework, den Unterschied herauszufinden.

function Total({ items }) {
  const sum = items.reduce((acc, item) => acc + item.price, 0);
  return <p>{sum}</p>;
}

const view = <Total items={cart} />;Bei gleichem Warenkorb liefert diese Funktion immer dieselbe Summe.

Jetzt der klassische Fehler. Du zeichnest eine Liste aus Daten, und jede Zeile bekommt einen stabilen key, der den Eintrag kennzeichnet und nicht seine Position.

function Rows({ items }) {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

items.map((item) => <li>{item.name}</li>);Die erste Version gibt dem Framework eine stabile Identität pro Zeile. Die zweite gibt ihm nichts.

Der key ist die Art, wie das Framework erkennt, dass diese Zeile auf dem Bildschirm derselbe Eintrag ist wie jene in den neuen Daten. Ohne keys fällt es auf die Position zurück: Zeile eins ist Zeile eins, Zeile zwei ist Zeile zwei. Füge oben in einer Liste aus Textfeldern einen Eintrag ein, und die Werte scheinen eine Zeile nach unten zu springen, weil der Browser das erste Feld behalten und nur die Beschriftung darüber geändert hat. Die Daten waren nie falsch. Die Zeilen wurden nur nie den richtigen Einträgen zugeordnet.

Wenn das erneute Rendering einer Komponente bedeutet, die Funktion noch einmal auszuführen, warum ist das dann nicht furchtbar langsam? Weil es das meistens nicht ist. Ein Tastendruck führt vielleicht eine Handvoll kleiner Funktionen aus, die ein paar hundert einfache Objekte bauen, und das ist viel billiger, als wenn der Browser ein Bild zeichnet. Es ist bezahlbar, was vor zwanzig Jahren einfach nicht ging, und moderne Anwendungen bauen auf dieser Tatsache auf.

Genau deshalb ist der ehrliche Rat zur Geschwindigkeit langweilig: Messe, bevor du optimierst. Eine Seite kann sich tausendmal pro Sekunde neu rendern und sich sofort anfühlen, während ein einziger falsch dimensionierter Bild-Baustein sie kaputt wirken lässt. Zu raten, welcher Teil langsam ist, ist das unzuverlässigste Werkzeug überhaupt; der Browser bringt schon Profiler mit, die es dir einfach sagen.