React-Komponenten: Funktionskomponenten mit Beispielen

Eine React-Komponente ist eine JavaScript-Funktion, die JSX zurückgibt: ein wiederverwendbares Stück UI wie ein Button, eine Karte oder eine ganze Seite. Du verwendest sie wie ein HTML-Tag, <Profile />, und React ruft die Funktion auf, um herauszufinden, was auf den Bildschirm kommt. Apps entstehen, indem man Komponenten in andere Komponenten setzt.

function Avatar() {
    return (
        <div
            style={{
                width: 48,
                height: 48,
                borderRadius: '50%',
                background: '#c7d2fe',
                display: 'grid',
                placeItems: 'center',
                fontWeight: 'bold',
            }}
        >
            AL
        </div>
    );
}

function Profile() {
    return (
        <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 12 }}>
            <Avatar />
            <div>
                <strong>Ada Lovelace</strong>
                <div>Wrote the first published program</div>
            </div>
        </div>
    );
}

export default function App() {
    return (
        <section>
            <h3>Team</h3>
            <Profile />
            <Profile />
        </section>
    );
}

App rendert Profile zweimal, und jedes Profile rendert einen Avatar. Ändere die Initialen in Avatar, und beide Profile aktualisieren sich, weil sie eine gemeinsame Definition haben. Gerade ist jede Person in dieser Liste gleich; die nächste Seite, Props, zeigt, wie du jeder Kopie ihre eigenen Daten übergibst.

Eine Komponente schreiben

Eine Funktionskomponente hat zwei Anforderungen:

1. Ihr Name beginnt mit einem Großbuchstaben: Profile, nicht profile.
2. Sie gibt etwas zurück, das React rendern kann: JSX, einen String, eine Zahl, null (nichts rendern) oder ein Array davon.

function Welcome() {
    return <h1>Welcome back</h1>;
}

// Arrow functions work the same way
const Welcome = () => <h1>Welcome back</h1>;

Wenn das JSX über mehrere Zeilen geht, setze es nach return in runde Klammern. Ohne sie gibt ein return mit folgendem Zeilenumbruch undefined zurück, und alles danach wird ignoriert.

Warum der Name großgeschrieben sein muss

JSX schaut auf den ersten Buchstaben eines Tags. Kleinbuchstabe bedeutet ein eingebautes HTML-Element, also bleibt <div> ein <div>. Großbuchstabe bedeutet „eine Variable im Scope“, also ruft <Profile /> deine Funktion Profile auf. Benennst du eine Komponente klein, erzeugt React stattdessen ein unbekanntes HTML-Element mit diesem Namen:

function Greeting() {
    console.log('Greeting ran');
    return <span>Hello from Greeting</span>;
}

function greeting() {
    console.log('greeting ran');
    return <span>Hello from greeting</span>;
}

export default function App() {
    return (
        <div>
            <p>Capitalized: <Greeting /></p>
            <p>Lowercase: <greeting /></p>
        </div>
    );
}

Die zweite Zeile zeigt nur ihr Label, und die Konsole zeigt nur Greeting ran. React hat ein leeres Tag <greeting> in die Seite gesetzt und die kleingeschriebene Funktion nie aufgerufen. Ein Entwicklungs-Build warnt außerdem, dass The tag <greeting> is unrecognized in this browser; die Vorschau läuft wie ein Produktions-Build, also siehst du nur den fehlenden Text. Benenne die Funktion in Greetings und das Tag in <Greetings /> um, um es zu beheben.

Komponenten zusammensetzen

Komponenten sind zum Verschachteln gedacht. Eine Seite ist ein Baum: App ganz oben, dann Layout-Teile, dann kleinere Teile bis hin zu einzelnen Buttons. Jede Komponente kennt nur die Teile, die sie direkt rendert, also kannst du über eine nach der anderen nachdenken.

import { useState } from 'react';

function LikeButton() {
    const [liked, setLiked] = useState(false);
    return (
        <button onClick={() => setLiked(!liked)}>
            {liked ? 'Liked' : 'Like'}
        </button>
    );
}

function Post({ title }) {
    return (
        <article style={{ borderBottom: '1px solid #ddd', padding: '8px 0' }}>
            <h4 style={{ margin: '0 0 6px' }}>{title}</h4>
            <LikeButton />
        </article>
    );
}

export default function App() {
    return (
        <main>
            <Post title="Components are functions" />
            <Post title="JSX compiles to function calls" />
            <Post title="State lives in components" />
        </main>
    );
}

Jeder LikeButton hat seinen eigenen State, also lässt das Liken eines Posts die anderen unberührt. Um jedem Post einen Teilen-Button zu geben, schreibst du ihn einmal und fügst <ShareButton /> in Post ein.

Wann du eine Komponente aufteilen solltest

Es gibt keine feste Regel, aber einige Zeichen sprechen dafür, dass ein Teil eine eigene Komponente verdient: Dasselbe Markup taucht an zwei Stellen auf, ein Abschnitt des JSX hat eigenen State (wie der Like-Button oben), oder die Funktion ist so lang geworden, dass du scrollen musst, um ihr return zu sehen. Wenn du entlang dieser Linien aufteilst, bleibt jede Komponente klein genug, um sie auf einem Bildschirm zu lesen. Zu frühes Aufteilen kostet wenig: Eine Komponente ist nur eine Funktion, also lassen sich zwei leicht wieder zusammenführen.

Komponenten exportieren und importieren

Die Editoren hier enthalten eine Datei, aber ein echtes Projekt legt Komponenten in eigene Dateien. Eine Datei kann einen Default-Export und beliebig viele benannte Exporte haben:

// Avatar.jsx
export default function Avatar({ initials }) {
    return <div className="avatar">{initials}</div>;
}

// Badge.jsx
export function Badge({ label }) {
    return <span className="badge">{label}</span>;
}
export function NewBadge() {
    return <Badge label="new" />;
}

// Profile.jsx
import Avatar from './Avatar.jsx';
import { Badge, NewBadge } from './Badge.jsx';

export default function Profile() {
    return (
        <div>
            <Avatar initials="AL" />
            <Badge label="admin" />
            <NewBadge />
        </div>
    );
}

Ein Default-Export lässt sich unter jedem Namen importieren; ein benannter Export wird in geschweiften Klammern mit seinem genauen Namen importiert. Teams wählen meist einen Stil und bleiben dabei. Dateinamen entsprechen üblicherweise der Komponente: Avatar.jsx exportiert Avatar.

Halte Komponenten pur

React erwartet, dass sich eine Komponente beim Rendern wie eine pure Funktion verhält: Dieselben Props und derselbe State ergeben dasselbe JSX, und das Rendern ändert nichts, was vorher schon existierte. React kann eine Komponente viele Male rendern, zu Zeitpunkten, die du nicht steuerst, also erzeugt eine Komponente, die beim Rendern äußere Variablen ändert, jedes Mal eine andere Ausgabe.

import { useState } from 'react';

let guest = 0;

function ImpureCup() {
    guest = guest + 1;
    return <li>Impure cup for guest #{guest}</li>;
}

function PureCup({ number }) {
    return <li>Pure cup for guest #{number}</li>;
}

export default function App() {
    const [renders, setRenders] = useState(1);

    return (
        <div>
            <ul>
                <ImpureCup />
                <ImpureCup />
                <ImpureCup />
            </ul>
            <ul>
                <PureCup number={1} />
                <PureCup number={2} />
                <PureCup number={3} />
            </ul>
            <button onClick={() => setRenders(renders + 1)}>Render again ({renders})</button>
        </div>
    );
}

Die unpuren Tassen beginnen bei 1, 2, 3. Klicke auf den Button: An den Gästen hat sich nichts geändert, und doch zeigt die unpure Liste jetzt 4, 5, 6, weil jeder Render die gemeinsame Variable guest erhöht hat. Die puren Tassen bekommen ihre Nummer aus den Props und bleiben korrekt. In der Entwicklung rendert Strict Mode jede Komponente zweimal, um genau diese Art von Bug aufzudecken; die Vorschau läuft wie ein Produktions-Build, also zeigt sich die Abweichung hier erst, wenn du erneut renderst.

Dinge zu ändern ist in Ordnung, nur nicht beim Rendern. Aktualisiere State in Event-Handlern und sprich mit der Außenwelt (Timer, Abonnements, der Titel des Dokuments) in Effekten.

Komponenten vs. Elemente

Die Komponente ist die Funktion, Profile. Ein Element ist das, was JSX erzeugt, wenn du <Profile /> schreibst: ein kleines Objekt, das sagt „rendere Profile mit diesen Props“. React erzeugt Elemente, ruft die darin genannten Komponenten auf und macht aus dem Ergebnis DOM. Du rufst eine Komponente nie selbst als Profile() auf; du schreibst <Profile /> und lässt React sie aufrufen, damit es ihren State und ihren Platz im Baum verfolgen kann.

Dieser Platz ist wichtig. Dieses Beispiel definiert eine Komponente in einer anderen Komponente, ein häufiger Fehler:

import { useState } from 'react';

export default function App() {
    const [clicks, setClicks] = useState(0);

    function NameField() {
        const [text, setText] = useState('');
        return <input value={text} onChange={(e) => setText(e.target.value)} />;
    }

    return (
        <div>
            <NameField />
            <button onClick={() => setClicks(clicks + 1)}>Re-render App ({clicks})</button>
        </div>
    );
}

Tippe etwas und klicke dann auf den Button: Dein Text verschwindet. Jeder Render von App erzeugt eine brandneue Funktion NameField, also sieht React an dieser Stelle einen anderen Komponententyp und wirft den alten samt seinem State weg. Verschiebe NameField über App, auf die oberste Ebene der Datei, und der Text übersteht jeden Klick. Die Seite zum Rendern erklärt, wie React entscheidet, was es behält.

Funktionskomponenten und Klassenkomponenten

Bevor Hooks mit React 16.8 kamen, wurden Komponenten, die State brauchten, als Klassen geschrieben:

import { Component } from 'react';

class Welcome extends Component {
    render() {
        return <h1>Hello, {this.props.name}</h1>;
    }
}

Klassenkomponenten funktionieren in React 19 weiterhin, und du begegnest ihnen in älteren Codebasen und in Error Boundaries, die noch eine Klasse verlangen. Neuer Code nutzt Funktionskomponenten mit Hooks wie useState und useEffect, die dieselben Aufgaben mit weniger Code erledigen. Die Seite zu Klassenkomponenten ordnet jeder Klassenfunktion ihren Hook zu.