React Top-Level API

React ist der Zugangspunkt zur React-Bibliothek. Falls du React von einem <script>-Tag heraus lädst, sind diese Top-Level APIs im globalen React-Objekt verfügbar. Solltest du ES6 mit npm verwenden, kannst du import React from 'react' schreiben. Wenn du ES5 mit npm verwendest, kannst du var React = require('react') schreiben.

Übersicht

Komponenten

Mit React-Komponenten kann die Benutzeroberfläche in unabhängige, wiederverwendbare Bestandteile aufgeteilt werden, die jeweils isoliert betrachtet werden können. React-Komponenten können als Unterklassen von React.Component oder React.PureComponent definiert werden.

• React.Component
• React.PureComponent

Solltest du keine ES6-Klassen benutzen, kannst du stattdessen das create-react-class-Modul verwenden. Siehe React ohne ES6 für mehr Informationen.

React-Komponenten können auch als Funktionen definiert werden, die ummantelt werden können:

• React.memo

React-Elemente erstellen

Um zu beschreiben, wie die Benutzeroberfläche aussehen soll, empfehlen wir, JSX zu verwenden. Ein JSX-Element ist eine alternative Schreibweise für das Aufrufen von React.createElement(). Wenn du JSX verwendest, rufst du die folgenden Methoden normalerweise nicht direkt auf:

• createElement()
• createFactory()

Siehe React ohne JSX für mehr Informationen.

Elemente verändern

React stellt mehrere APIs zur Verfügung, um Elemente zu manipulieren:

• cloneElement()
• isValidElement()
• React.Children

Fragmente

React stellt auch eine Komponente zu Verfügung, mit der mehrere Elemente ohne Wrapper gerendert werden können:

• React.Fragment

Refs

• React.createRef
• React.forwardRef

Suspense

Mit Suspense können Komponenten vor dem Rendern auf etwas “warten”. Momentan unterstützt Suspense nur einen Anwendungsfall: Komponenten dynamisch laden mit React.lazy. In Zukunft wird es auch andere Anwendungsfälle wie z.B. das Abrufen von Daten unterstützen.

• React.lazy
• React.Suspense

Transitions

Transitions ist ein neues nebenläufiges Feature, welches in React 18 eingeführt wurde. Sie ermöglichen es Dir, Aktualisierungen als Transition zu markieren, was React mitteilt, dass sie unterbrochen werden können und vermeiden, für bereits sichtbare Inhalte zu Suspense-Fallbacks zurückzukehren.

• React.startTransition
• React.useTransition

Hooks

Hooks sind neu in React 16.8. Sie erlauben die Verwendung von State und anderen React-Features ohne Klassen. Hooks haben einen eigenen Bereich in der Dokumentation und eine eigene API-Referenz:

• Grundlegende Hooks

  • useState
  • useEffect
  • useContext

• Weitere Hooks

  • useReducer
  • useCallback
  • useMemo
  • useRef
  • useImperativeHandle
  • useLayoutEffect
  • useDebugValue
  • useDeferredValue
  • useTransition
  • useId

• Library Hooks

  • useSyncExternalStore
  • useInsertionEffect

Referenz

React.Component

React.Component ist die Basis-Klasse für React-Komponenten, die mit ES6-Klassen definiert werden:

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

Unter React.Component API-Referenz gibt es eine Liste der Methoden und Eigenschaften, die sich auf die React.Component-Basisklasse beziehen.

React.PureComponent

React.PureComponent ähnelt React.Component, unterscheidet sich aber dahingehend, dass shouldComponentUpdate() von React.Component nicht implementiert wird, während React.PureComponent es durch das oberflächliche Vergleichen von Props und State implementiert.

Wenn die render()-Funktion einer React-Komponente bei Gleichbleiben von Props und State das gleiche Ergebnis rendert, kann die Nutzung von React.PureComponent in manchen Fällen die Performance verbessern.

Hinweis

shouldComponentUpdate() von React.PureComponent vergleicht Objekte nur oberflächlich. Falls diese komplexe Datenstrukturen enthalten, könnte es für tiefer gelegene Unterschiede zu falschen Negativbefunden kommen. Benutze PureComponent nur dann, wenn Props und State einfach sind, oder verwende forceUpdate() wenn du weißt, dass tiefergelegene Datenstrukturen sich verändert haben. Oder überlege dir, unveränderliche (immutable) Objekte zu verwenden, um das schnelle Vergleichen geschachtelter Daten zu erleichtern.

Darüber hinaus überspringt shouldComponentUpdate() von React.PureComponent den kompletten der Komponente untergeordneten Teilbaum. Es sollte also sichergestellt werden, dass alle Kind-Komponenten auch “pur” sind.

React.memo

const MyComponent = React.memo(function MyComponent(props) {
  /* rendere mit Props */
});

React.memo ist eine Higher-Order-Komponente.

Wenn deine Komponente das gleiche Ergebnis mit den gleichen Props liefert, kannst du es mit React.memo umschließen um in einigen Fällen die Performance zu verbessern, in dem sich das Ergebnis gemerkt wird. Das bedeutet, dass React das Rendern der Komponente überspringt und stattdessen das zuletzt gerenderte Ergebnis wiederverwendet.

React.memo betrifft nur Änderungen von Props. Wenn deine Funktionskomponente von React.memo umschloßen ist, eine useState, useReducer oder useContext Hook in ihrer Implementierung hat, wird sie immer noch gerendert, wenn sich der State oder der Context ändert.

Standardmäßig wird es nur oberflächlich komplexe Objekte im Props-Objekt vergleichen. Wenn du die Kontrolle über den Vergleich haben möchtest, kannst du auch eine benutzerdefinierte Vergleichsfunktion als zweites Argument angeben.

function MyComponent(props) {
  /* rendere mit Props */
}
function areEqual(prevProps, nextProps) {
  /*
  Gib 'true' zurück, wenn nextProps das gleiche Ergebnis rendern würde 
  wie prevProps, ansonsten gib 'false' zurück
  */
}
export default React.memo(MyComponent, areEqual);

Diese Methode existiert nur zur Performance-Optimierung. Verlasse dich nicht auf sie, um das Rendern zu “verhindern”, da dadurch Bugs entstehen können.

Hinweis

Im Gegensatz zur shouldComponentUpdate()-Methode in Klassen-Komponenten gibt die areEqual-Funktion true zurück, wenn die Props gleich sind und false, wenn die Props unterschiedlich sind, also genau andersherum als shouldComponentUpdate.

createElement()

React.createElement(
  type,
  [props],
  [...children]
)

Erzeugt und gibt ein neues React-Element eines bestimmten Typs zurück. Das Typ-Argument kann entweder ein Tag-Name als String (z.B. 'div' oder 'span'), ein React-Komponenten-Typ (eine Klasse oder eine Funktion) oder ein React-Fragment-Typ sein.

In JSX geschriebener Code wird konvertiert, um React.createElement() zu benutzen. Wenn du JSX verwendest, rufst du React.createElement() normalerweise nicht direkt auf. Siehe React ohne JSX für mehr Informationen.

cloneElement()

React.cloneElement(
  element,
  [config],
  [...children]
)

Klone und gebe ein neues React-Element mit element als Ausgangspunkt zurück. config sollte alle neuen Props, keys oder refs enthalten. Das resultierende Element hat die Props des ursprünglichen Elements, in die die neuen Props oberflächlich eingefügt werden. Neue Kinder ersetzen die existierenden Kinder. key und ref des ursprünglichen Elements bleiben erhalten, wenn kein key und ref in der config vorhanden sind.

React.cloneElement() ist fast äquivalent zu:

<element.type {...element.props} {...props}>{children}</element.type>

Es bewahrt jedoch auch die Refs. Das bedeutet, wenn du ein Kind mit einem Ref erhälst, dieses nicht versehentlich vom Vorgänger stiehlst. Du bekommst das selbe Ref an dein neues Element angehängt. Das neue Ref oder der neue Key ersetzt die alten, falls vorhanden.

Diese API wurde als Ersatz für das veraltete React.addons.cloneWithProps() eingeführt.

createFactory()

React.createFactory(type)

Gibt eine Funktion zurück, die React-Elemente eines bestimmten Typs erzeugt. Wie bei React.createElement() kann das Typ-Argument entweder ein Tag-Name als String (z.B. 'div' oder 'span'), ein React-Komponenten-Typ (eine Klasse oder eine Funktion) oder ein React-Fragment-Typ sein.

Dieser Helfer gilt als veraltet, und wir empfehlen, entweder JSX oder React.createElement() direkt zu verwenden.

Wenn du JSX verwendest, rufst du React.createFactory() normalerweise nicht direkt auf. Siehe React ohne JSX für mehr Informationen.

isValidElement()

React.isValidElement(object)

Überprüft, ob das Objekt ein React-Element ist. Gibt true oder false zurück.

React.Children

React.Children bietet Hilfsmittel, um mit der eher undurchschaubaren Datenstruktur von this.props.children umzugehen.

React.Children.map

React.Children.map(children, function[(thisArg)])

Ruft für jedes unmittelbare Kind aus children eine Funktion auf, bei der this auf thisArg gesetzt ist. Wenn children ein Array ist, wird dieses durchlaufen und die Funktion wird für jedes Kind im Array aufgerufen. Falls children null oder undefined ist, gibt diese Methode statt einem Array null oder undefined zurück.

Hinweis

Falls children ein Fragment ist, wird es wie ein einziges Kind behandelt und nicht durchlaufen.

React.Children.forEach

React.Children.forEach(children, function[(thisArg)])

Wie React.Children.map(), gibt jedoch kein Array zurück.

React.Children.count

React.Children.count(children)

Gibt die Gesamtzahl der Komponenten in children zurück, und gleicht der Anzahl der Callbacks, die mit der map- oder forEach-Methode aufgerufen werden würden.

React.Children.only

React.Children.only(children)

Überprüft, ob children nur ein Kind (ein React-Element) hat und gibt es zurück. Ansonsten wirft diese Methode einen Fehler.

Hinweis:

React.Children.only() akzeptiert nicht den Rückgabewert von React.Children.map(), da dieser ein Array ist und kein React-Element.

React.Children.toArray

React.Children.toArray(children)

Gibt die eher undurchschaubare children-Datenstruktur als flaches Array zurück, wobei jedem Kind ein Key zugeordnet ist. Nützlich, falls in render-Methoden Kinder-Ansammlungen manipuliert werden sollen, insbesondere beim Umordnen oder Slicen von this.props.children, bevor diese weitergegeben werden.

Hinweis:

React.Children.toArray() ändert Keys, um die Semantik verschachtelter Arrays zu erhalten, während Listen von Kindern geflattet werden. Das bedeutet, dass toArray ein Präfix vor jeden Key des zurückgegebenen Arrays setzt, damit der Key jedes Elements dem Input-Array, dem es angehört, zugeordnet ist.

React.Fragment

Die React.Fragment-Komponente erlaubt dir, mehrere Elemente in einer render()-Methode zurückzugeben, ohne ein zusätzliches DOM-Element zu kreieren:

render() {
  return (
    <React.Fragment>
      Irgendein Text.
      <h2>Eine Überschrift</h2>
    </React.Fragment>
  );
}

Du kannst auch die Kurzschreibweise <></> verwenden. Für mehr Informationen siehe React v16.2.0: Verbesserte Unterstützung für Fragmente.

React.createRef

React.createRef erstellt eine Referenz, die über das ref-Attribut an React-Elemente angehängt werden kann.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.inputRef = React.createRef();  }

  render() {
    return <input type="text" ref={this.inputRef} />;  }

  componentDidMount() {
    this.inputRef.current.focus();  }
}

React.forwardRef

React.forwardRef erstellt eine React-Komponente, die das ref-Attribut, das sie erhält, an eine ihr in der Baumstruktur untergeordnete Komponente weitergibt. Diese Technik ist nicht sehr verbreitet, ist jedoch in zwei Fällen besonders nützlich:

• Refs an DOM-Komponenten weitergeben
• Refs and Higher-Order-Komponenten weitergeben

React.forwardRef akzeptiert eine render-Funktion als Argument. React ruft diese Funktion mit den zwei Argumenten props und ref auf und sollte einen React-Knoten zurückgeben.

const FancyButton = React.forwardRef((props, ref) => (  <button ref={ref} className="FancyButton">    {props.children}
  </button>
));

// Jetzt zeigt die ref direkt auf den DOM-button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

Im obigen Beispiel übergibt React eine ref, die dem <FancyButton ref={ref}>-Element gegeben wurde, als zweites Argument an die render-Funktion innerhalb des React.forwardRef-Aufrufs. Diese render-Funktion gibt die ref an das <button ref={ref}>-Element weiter.

Dadurch zeigt ref.current direkt auf die <button>-DOM-Element-Instanz, nachdem React die ref eingefügt hat.

Für mehr Informationen siehe Refs weitergeben.

React.lazy

React.lazy() lässt dich eine Komponente definieren, die dynamisch geladen wird. Das hilft, die Bundlegröße zu reduzieren, indem das Laden von Komponenten, die im ursprünglichen Render nicht benutzt werden, verzögert wird.

In unserer Code-Splitting-Dokumentation kannst du lernen, wie es benutzt wird. Du kannst auch diesen Artikel lesen, in dem die Verwendung im Detail erläutert wird.

// Diese Komponente wird dynamisch geladen
const SomeComponent = React.lazy(() => import('./SomeComponent'));

Beachte, dass das Rendern von lazy-Komponenten ein <React.Suspense> weiter oben im Rendering-Baum benötigt. Damit wird ein Lade-Indikator bestimmt.

Hinweis

Die Verwendung von React.lazy mit dynamischen Imports setzt voraus, dass in der JS-Umgebung Promises verfügbar sind. Hierzu braucht man ein Polyfill für IE11 und darunter.

React.Suspense

React.Suspense lässt dich den Lade-Indikator bestimmen, der angezeigt wird, falls einige Komponenten weiter unten im Rendering-Baum noch nicht render-bereit sind. In Zukunft planen wir, Suspense weitere Szenarien wie das Abrufen von Daten handhaben zu lassen. Dies kannst Du in unserer Roadmap nachlesen.

Momentan ist das Laden von lazy-Komponenten der einzige Anwendungsfall, den <React.Suspense> unterstützt:

// Diese Komponente wird dynamisch geladen
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    // Zeigt <Spinner>, bis OtherComponent geladen ist
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}

Das ist in unserem Code-Splitting-Guide dokumentiert. Beachte, dass sich lazy-Komponenten tief im Suspense-Baum befinden können — es muss nicht jede einzelne davon ummantelt werden. Es wird empfohlen, <Suspense> dort zu verwenden, wo ein Lade-Indikator angezeigt werden soll, und lazy() dort zu verwenden, wo Code-Splitting stattfinden soll.

Hinweis

Bei Inhalten, die dem Benutzer bereits angezeigt werden, kann das Zurückschalten auf eine Ladeanzeige verwirrend sein. Manchmal ist es besser, die “alte” Benutzeroberfläche zu zeigen, während die neue Benutzeroberfläche vorbereitet wird. Dazu kannst Du die neuen Transition-APIs startTransition und useTransition verwenden, um Aktualisierungen als Transitions zu markieren und unerwartete Fallbacks zu vermeiden.

React.Suspense in Server Side Rendering

Während des serverseitigen Renderns kannst Du mit Suspense Boundaries Ihre Anwendung in kleineren Teilen leeren, indem Sie sie anhalten. Wenn eine Komponente ausgesetzt wird, planen wir eine Aufgabe mit niedriger Priorität, um den Fallback der nächstgelegenen Suspense-Grenze zu rendern. Wenn die Suspendierung der Komponente aufgehoben wird, bevor wir den Fallback leeren, senden wir den eigentlichen Inhalt und verwerfen den Fallback.

React.Suspense während der Hydratation

Suspense-Grenzen hängen davon ab, dass ihre übergeordneten Grenzen hydratisiert werden, bevor sie hydratisiert werden können, aber sie können unabhängig von Geschwistergrenzen hydratisiert werden. Ereignisse an einer Grenze, bevor sie hydratisiert wird, bewirken, dass die Grenze mit einer höheren Priorität als benachbarte Grenzen hydratisiert wird. Weiterlesen

React.startTransition

React.startTransition(callback)

Mit React.startTransition können Sie Aktualisierungen innerhalb des bereitgestellten Callbacks als Transition markieren. Diese Methode wurde entwickelt, um verwendet zu werden, wenn React.useTransition nicht verfügbar ist.

Hinweis:

Aktualisierungen innerhalb einer Transition führen zu dringenderen Aktualisierungen als Klicks.

Aktualisierungen innerhalb einer Transition bewirken keinen Fallback für erneut suspendete Inhalte, sodass der Benutzer weiterhin interagieren kann, während die Aktualisierung gerendert wird.

React.startTransition stellt kein isPending-Flag bereit. Um den ausstehenden Status einer Transition zu verfolgen, siehe React.useTransition.