Komponenten: eine Funktion, die einen Bildschirm zurückgibt

Öffne irgendeine echte Anwendung und zähle die kleinen wiederkehrenden Teile: ein Abzeichen, ein Preis, eine Zeile in einer Liste, eine Karte in einem Katalog. Jeder davon ist eine Komponente. Eine zu schreiben ist weniger eine neue Fähigkeit als eine alte in anderer Kleidung.

Im Sprachtrack war eine Funktion eine benannte Box: Werte gehen hinein, ein Wert kommt heraus, und über den Namen rufst du sie auf. Eine Komponente ist genau diese Box mit einer Änderung: was herauskommt, ist ein Teil der Schnittstelle.

function totalPrice(price, count) {
  return price * count;
}

totalPrice(2.50, 4);

function Badge({ label }) {
  return <span className="badge">{label}</span>;
}

const view = <Badge label="New" />;Dieselbe Form zweimal: Zahlen hinein und eine Zahl heraus, props hinein und Elemente heraus.

Das ist der ganze Trick. Eine Komponente ist ein benannter Teil der Schnittstelle. Du gibst ihr einen Namen, du sagst, was sie braucht, und ab dann kann der Rest des Programms nach einem Abzeichen oder einer Preiszeile fragen, ohne zu wissen, wie eines davon gezeichnet wird.

Hier ist ein Katalog: drei Produkte, eine Form von Karte. Einmal geschrieben, dreimal verwendet.

function ProductCard({ title, price, inStock }) {
  return (
    <article>
      <h2>{title}</h2>
      <p>{price}</p>
      {inStock ? <button>Add</button> : <p>Sold out</p>}
    </article>
  );
}

function Catalogue() {
  return (
    <section>
      <ProductCard title="Bread" price="2.50" inStock={true} />
      <ProductCard title="Tea" price="3.20" inStock={false} />
      <ProductCard title="Apples" price="1.80" inStock={true} />
    </section>
  );
}Eine Karte, einmal beschrieben, dreimal mit unterschiedlichen Eingaben verwendet.

Die Eingaben werden als Attribute geschrieben und kommen zusammen in einem Objekt an, das props heißt. In diesem Beispiel erhält die Karte title, price und inStock, und es ist ihr egal, woher sie stammen.

function Price({ amount }) {
  amount = amount + 1;
  return <p>{amount}</p>;
}

function Price({ amount }) {
  const [shown, setShown] = useState(amount);
  return <p>{shown}</p>;
}Die zweite Version ist nicht besser, weil sie länger ist. Sie ist besser, weil die Zahl jetzt zu der Komponente gehört, die sie ändert.

Die ehrliche Alternative zu Komponenten ist Kopieren und Einfügen, und bei zwei Karten ist das in Ordnung. Die Rechnung kommt später. Die Designerin möchte bei jeder Karte eine abgerundete Ecke: jetzt bearbeitest du zwölf Dateien. Eine Preisregel ändert sich und soll die Steuer enthalten: du korrigierst neun davon, übersiehst drei, und der Katalog zeigt zwei verschiedene Preise für dasselbe Produkt. Eine Komponente macht aus all dem eine einzige Änderung an einer einzigen Stelle, denn nur eine Stelle weiß, wie eine Karte aussieht.