Diese Seite enthält eine detaillierte API-Referenz für die React Component-Klassendefinition. Es wird davon ausgegangen, dass Sie mit grundlegenden React-Konzepten wie Komponenten und Requisiten sowie Status und Lebenszyklus vertraut sind. Wenn nicht, lies sie zuerst.
Übersicht
Mit React können Sie Komponenten als Klassen oder Funktionen definieren. Komponenten, die als Klassen definiert sind, bieten derzeit weitere Funktionen, die auf dieser Seite ausführlich beschrieben werden. Um eine React-Komponentenklasse zu definieren, müssen Sie React.Component:
class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }}Die einzige Methode, die Sie in einer React.Component Unterklasse definieren müssen, heißt render(). Alle anderen auf dieser Seite beschriebenen Methoden sind optional.
Wir empfehlen dringend, keine eigenen Basiskomponentenklassen zu erstellen. In React-Komponenten wird die Wiederverwendung von Code hauptsächlich durch Komposition und nicht durch Vererbung erreicht.
Hinweis:
React zwingt Sie nicht, die ES6-Klassensyntax zu verwenden. Wenn Sie dies vermeiden möchten, können Sie stattdessen das Modul
create-react-classoder eine ähnliche benutzerdefinierte Abstraktion verwenden. Werfen Sie einen Blick auf Die Verwendung von React ohne ES6, um mehr zu erfahren.
Der Komponentenlebenszyklus
Jede Komponente verfügt über mehrere „Lebenszyklusmethoden“, die Sie überschreiben können, um Code zu bestimmten Zeiten im Prozess auszuführen. Sie können dieses Lebenszyklusdiagramm als Spickzettel verwenden. In der folgenden Liste sind häufig verwendete Lifecycle-Methoden fett markiert. Der Rest von ihnen existiert für relativ seltene Anwendungsfälle.
Mounten
Diese Methoden werden in der folgenden Reihenfolge aufgerufen, wenn eine Instanz einer Komponente erstellt und in das DOM eingefügt wird:
constructor()static getDerivedStateFromProps()render()componentDidMount()
Hinweis:
Diese Methoden gelten als veraltet und sollten in neuem Code vermieden werden:
UNSAFE_componentWillMount()
Aktualisieren
Ein Update kann durch Änderungen an Requisiten oder Status verursacht werden. Diese Methoden werden in der folgenden Reihenfolge aufgerufen, wenn eine Komponente neu gerendert wird:
static getDerivedStateFromProps()shouldComponentUpdate()render()getSnapshotBeforeUpdate()componentDidUpdate()
Hinweis:
Diese Methoden gelten als veraltet und sollten in neuem Code vermieden werden:
UNSAFE_componentWillUpdate()UNSAFE_componentWillReceiveProps()
Aushängen
Diese Methode wird aufgerufen, wenn eine Komponente aus dem DOM entfernt wird:
componentWillUnmount()
Fehlerbehandlung
Diese Methoden werden aufgerufen, wenn beim Rendern, in einer Lifecycle-Methode oder im Konstruktor einer untergeordneten Komponente ein Fehler auftritt.
static getDerivedStateFromError()componentDidCatch()
Andere APIs
Jede Komponente bietet auch einige andere APIs:
setState()forceUpdate()
Klasseneigenschaften
defaultPropsdisplayName
Instanzeigenschaften
propsstate
Referenz
Häufig verwendete Lifecycle-Methoden
Die Methoden in diesem Abschnitt decken die überwiegende Mehrheit der Anwendungsfälle ab, auf die Sie beim Erstellen von React-Komponenten stoßen werden. Eine visuelle Referenz finden Sie in diesem Lebenszyklusdiagramm.
render()
render()Die render() Methode ist die einzige erforderliche Methode in einer Klassenkomponente.
Wenn es aufgerufen wird, sollte es this.props und this.state untersuchen und einen der folgenden Typen zurückgeben:
- React-Elemente. Typischerweise über JSX erstellt. Beispielsweise sind
<div />und<MyComponent />React-Elemente, die React anweisen, einen DOM-Knoten bzw. eine andere benutzerdefinierte Komponente zu rendern. - Arrays und Fragmente. Lassen Sie mehrere Elemente vom Rendern zurückgeben. Weitere Informationen finden Sie in der Dokumentation zu Fragmenten.
- Portale. Lassen Sie Kinder in einen anderen DOM-Teilbaum rendern. Weitere Informationen finden Sie in der Dokumentation zu Portalen.
- String und Zahlen. Diese werden als Textknoten im DOM gerendert.
- Boolesche Werte oder
null. Rendern Sie nichts. (Existiert meistens, um dasreturn test && <Child />-Muster zu unterstützen, wobeitestboolesch ist.)
Die render() Funktion sollte rein sein, was bedeutet, dass sie den Komponentenstatus nicht ändert, bei jedem Aufruf dasselbe Ergebnis zurückgibt und nicht direkt mit dem Browser interagiert.
Wenn Sie mit dem Browser interagieren müssen, führen Sie Ihre Arbeit stattdessen mit componentDidMount() oder den anderen Lifecycle-Methoden aus. render() rein zu halten, erleichtert das Nachdenken über Komponenten.
Hinweis
render()wird nicht aufgerufen, wennshouldComponentUpdate()false zurückgibt.
constructor()
constructor(props)Wenn Sie den Status nicht initialisieren und keine Methoden binden, müssen Sie keinen Konstruktor für Ihre Reaktionskomponente implementieren.
Der Konstruktor für eine React-Komponente wird aufgerufen, bevor sie eingehängt wird. Wenn Sie den Konstruktor für eine React.Component -Unterklasse implementieren, sollten Sie super(props) vor jeder anderen Anweisung aufrufen. Andernfalls ist this.props im Konstruktor nicht definiert, was zu Fehlern führen kann.
Normalerweise werden Konstruktoren in React nur für zwei Zwecke verwendet:
- Initialisieren des lokalen Status durch Zuweisen eines Objekts zu
this.state. - Ereignisbehandlungsmethoden an eine Instanz binden.
Sie sollten setState() nicht im constructor() aufrufen. Wenn Ihre Komponente stattdessen den lokalen Status verwenden muss, weisen Sie den Anfangsstatus this.state direkt im Konstruktor zu:
constructor(props) { super(props); // Don't call this.setState() here! this.state = { counter: 0 }; this.handleClick = this.handleClick.bind(this);}Konstruktor ist der einzige Ort, an dem Sie this.state direkt zuweisen sollten. Bei allen anderen Methoden müssen Sie stattdessen this.setState() .
Vermeiden Sie die Einführung von Nebenwirkungen oder Abonnements im Konstruktor. Verwenden Sie für diese Anwendungsfälle stattdessen componentDidMount() .
Hinweis
Vermeiden Sie das Kopieren von Requisiten in den Status! Dies ist ein häufiger Fehler:
constructor(props) { super(props); // Don't do this! this.state = { color: props.color };}Das Problem ist, dass es sowohl unnötig ist (Sie können stattdessen
this.props.colordirekt verwenden) als auch Fehler verursacht (Aktualisierungen dercolorRequisite werden nicht im Status angezeigt).Verwenden Sie dieses Muster nur, wenn Sie Prop-Updates absichtlich ignorieren möchten. In diesem Fall ist es sinnvoll, die Requisite so umzubenennen, dass sie
initialColoroderdefaultColor. Sie können dann eine Komponente zwingen, ihren internen Status „zurückzusetzen“, indem Sie bei Bedarf ihrekey.Lesen Sie unseren Blogbeitrag zum Vermeiden abgeleiteter Zustände, um zu erfahren, was zu tun ist, wenn Sie der Meinung sind, dass Sie einen Zustand benötigen, um von den Requisiten abhängig zu sein.
componentDidMount()
componentDidMount()componentDidMount() wird unmittelbar nach dem Mounten einer Komponente aufgerufen (in den Baum eingefügt). Initialisierung, die DOM-Knoten erfordert, sollte hier gehen. Wenn Sie Daten von einem Remote-Endpunkt laden müssen, ist dies ein guter Ort, um die Netzwerkanforderung zu instanziieren.
Diese Methode ist ein guter Ort, um Abonnements einzurichten. Wenn Sie das tun, vergessen Sie nicht, sich in componentWillUnmount() abzumelden.
Sie können setState() sofort in componentDidMount() aufrufen. Es wird ein zusätzliches Rendering ausgelöst, aber es wird passieren, bevor der Browser den Bildschirm aktualisiert. Dies garantiert, dass der Benutzer den Zwischenzustand nicht sieht, obwohl render() in diesem Fall zweimal aufgerufen wird. Verwenden Sie dieses Muster mit Vorsicht, da es häufig zu Leistungsproblemen führt. In den meisten Fällen sollten Sie stattdessen den Anfangszustand im constructor() zuweisen können. Es kann jedoch für Fälle wie Modals und Tooltips erforderlich sein, wenn Sie einen DOM-Knoten messen müssen, bevor Sie etwas rendern, das von seiner Größe oder Position abhängt.
componentDidUpdate()
componentDidUpdate(prevProps, prevState, snapshot)componentDidUpdate() wird unmittelbar nach der Aktualisierung aufgerufen. Diese Methode wird nicht für das anfängliche Rendern aufgerufen.
Verwenden Sie dies als Gelegenheit, das DOM zu bearbeiten, wenn die Komponente aktualisiert wurde. Dies ist auch ein guter Ort, um Netzwerkanfragen zu stellen, solange Sie die aktuellen Requisiten mit früheren Requisiten vergleichen (z. eine Netzwerkanforderung ist möglicherweise nicht erforderlich, wenn sich die Requisiten nicht geändert haben).
componentDidUpdate(prevProps) { // Typical usage (don't forget to compare props): if (this.props.userID !== prevProps.userID) { this.fetchData(this.props.userID); }}Sie können setState() sofort in componentDidUpdate() aufrufen, aber beachten Sie, dass es in eine Bedingung wie im obigen Beispiel eingeschlossen werden muss, oder Sie verursachen eine Endlosschleife. Es würde auch ein zusätzliches erneutes Rendern verursachen, das zwar für den Benutzer nicht sichtbar ist, aber die Leistung der Komponente beeinträchtigen kann. Wenn Sie versuchen, einen Zustand auf eine von oben kommende Stütze zu „spiegeln“, sollten Sie stattdessen die Stütze direkt verwenden. Lesen Sie mehr darüber, warum das Kopieren von Requisiten in den Status Fehler verursacht.
Wenn Ihre Komponente den Lebenszyklus getSnapshotBeforeUpdate() implementiert (was selten vorkommt), wird der zurückgegebene Wert als dritter „Snapshot“ -Parameter an componentDidUpdate() . Andernfalls ist dieser Parameter nicht definiert.
Hinweis
componentDidUpdate()wird nicht aufgerufen, wennshouldComponentUpdate()false zurückgibt.
componentWillUnmount()
componentWillUnmount()componentWillUnmount() wird unmittelbar vor dem Aushängen und Zerstören einer Komponente aufgerufen. Führen Sie bei dieser Methode alle erforderlichen Bereinigungen durch, z. B. das Ungültigmachen von Timern, das Abbrechen von Netzwerkanforderungen oder das Bereinigen von Abonnements, die in componentDidMount() erstellt wurden.
Sie sollten setState() nicht in componentWillUnmount() aufrufen, da die Komponente niemals neu gerendert wird. Sobald eine Komponenteninstanz nicht mehr gemountet ist, wird sie nie wieder gemountet.
Selten verwendete Lifecycle-Methoden
Die Methoden in diesem Abschnitt entsprechen ungewöhnlichen Anwendungsfällen. Sie sind ab und zu praktisch, aber die meisten Ihrer Komponenten benötigen wahrscheinlich keine davon. Sie können die meisten der folgenden Methoden in diesem Lebenszyklusdiagramm sehen, wenn Sie oben auf das Kontrollkästchen „Weniger häufige Lebenszyklen anzeigen“ klicken.
shouldComponentUpdate()
shouldComponentUpdate(nextProps, nextState)Verwenden Sie shouldComponentUpdate() , um React mitzuteilen, ob die Ausgabe einer Komponente von der aktuellen Änderung des Status oder der Requisiten nicht betroffen ist. Das Standardverhalten besteht darin, bei jeder Statusänderung erneut zu rendern, und in den allermeisten Fällen sollten Sie sich auf das Standardverhalten verlassen.
shouldComponentUpdate() wird vor dem Rendern aufgerufen, wenn neue Requisiten oder Status empfangen werden. Der Standardwert ist true. Diese Methode wird nicht für das anfängliche Rendern aufgerufen oder wenn forceUpdate() verwendet wird.
Diese Methode existiert nur als Leistungsoptimierung. Verlassen Sie sich nicht darauf, ein Rendering zu „verhindern“, da dies zu Fehlern führen kann. Erwägen Sie, das eingebaute PureComponent zu verwenden, anstatt shouldComponentUpdate() von Hand zu schreiben. PureComponent führt einen flachen Vergleich von Requisiten und Status durch und verringert die Wahrscheinlichkeit, dass Sie ein notwendiges Update überspringen.
Wenn Sie sicher sind, dass Sie es von Hand schreiben möchten, können Sie this.props mit nextProps und this.state mit nextState vergleichen und false um React mitzuteilen, dass das Update übersprungen werden kann. Beachten Sie, dass die Rückgabe von false nicht verhindert, dass untergeordnete Komponenten erneut gerendert werden, wenn sich ihr Status ändert.
Wir empfehlen keine tiefgreifenden Gleichheitsprüfungen oder die Verwendung von JSON.stringify() in shouldComponentUpdate() . Es ist sehr ineffizient und beeinträchtigt die Leistung.
Wenn shouldComponentUpdate()false zurückgibt, werden derzeit UNSAFE_componentWillUpdate()render() und componentDidUpdate() nicht aufgerufen. In Zukunft kann React shouldComponentUpdate() als Hinweis und nicht als strikte Anweisung behandeln, und die Rückgabe von false kann immer noch zu einem erneuten Rendern der Komponente führen.
static getDerivedStateFromProps()
static getDerivedStateFromProps(props, state)getDerivedStateFromProps wird direkt vor dem Aufruf der Render-Methode aufgerufen, sowohl beim ersten Einhängen als auch bei nachfolgenden Aktualisierungen. Es sollte ein Objekt zurückgeben, um den Status zu aktualisieren, oder null , um nichts zu aktualisieren.
Diese Methode gibt es für seltene Anwendungsfälle, in denen der Status von Änderungen der Requisiten im Laufe der Zeit abhängt. Dies kann beispielsweise nützlich sein, um eine <Transition> -Komponente zu implementieren, die ihre vorherigen und nächsten untergeordneten Elemente vergleicht, um zu entscheiden, welche von ihnen ein- und ausgeblendet werden sollen.
Das Ableiten des Zustands führt zu ausführlichem Code und macht es schwierig, über Ihre Komponenten nachzudenken.Stellen Sie sicher, dass Sie mit einfacheren Alternativen vertraut sind:
- Wenn Sie als Reaktion auf eine Änderung der Requisiten einen Nebeneffekt (z. B. Datenabruf oder eine Animation) ausführen müssen, verwenden Sie stattdessen
componentDidUpdatelifecycle . - Wenn Sie einige Daten nur dann neu berechnen möchten, wenn sich eine Requisite ändert, verwenden Sie stattdessen einen Memoisierungshelfer.
- Wenn Sie einen Zustand „zurücksetzen“ möchten, wenn sich eine Requisite ändert, sollten Sie stattdessen eine Komponente vollständig gesteuert oder vollständig unkontrolliert mit einer
key.
Diese Methode hat keinen Zugriff auf die Komponenteninstanz. Wenn Sie möchten, können Sie Code zwischen getDerivedStateFromProps() und den anderen Klassenmethoden wiederverwenden, indem Sie reine Funktionen der Komponentenrequisiten und des Status außerhalb der Klassendefinition extrahieren.
Beachten Sie, dass diese Methode bei jedem Rendern ausgelöst wird, unabhängig von der Ursache. Dies steht im Gegensatz zu UNSAFE_componentWillReceiveProps , das nur ausgelöst wird, wenn das übergeordnete Element ein erneutes Rendern verursacht und nicht als Ergebnis eines lokalen setState .
getSnapshotBeforeUpdate()
getSnapshotBeforeUpdate(prevProps, prevState)getSnapshotBeforeUpdate() wird aufgerufen, bevor die zuletzt gerenderte Ausgabe z.B. an das DOM übergeben wird. Dadurch kann Ihre Komponente einige Informationen aus dem DOM erfassen (z. B. die Bildlaufposition), bevor sie möglicherweise geändert wird. Jeder von dieser Methode zurückgegebene Wert wird als Parameter an componentDidUpdate() übergeben.
Dieser Anwendungsfall ist nicht üblich, kann aber in Benutzeroberflächen wie einem Chat-Thread auftreten, die die Bildlaufposition auf besondere Weise behandeln müssen.
Ein Snapshot-Wert (oder null) sollte zurückgegeben werden.
Zum Beispiel:
class ScrollingList extends React.Component { constructor(props) { super(props); this.listRef = React.createRef(); } getSnapshotBeforeUpdate(prevProps, prevState) { // Are we adding new items to the list? // Capture the scroll position so we can adjust scroll later. if (prevProps.list.length < this.props.list.length) { const list = this.listRef.current; return list.scrollHeight - list.scrollTop; } return null; } componentDidUpdate(prevProps, prevState, snapshot) { // If we have a snapshot value, we've just added new items. // Adjust scroll so these new items don't push the old ones out of view. // (snapshot here is the value returned from getSnapshotBeforeUpdate) if (snapshot !== null) { const list = this.listRef.current; list.scrollTop = list.scrollHeight - snapshot; } } render() { return ( <div ref={this.listRef}>{/* ...contents... */}</div> ); }}In den obigen Beispielen ist es wichtig, die scrollHeight -Eigenschaft in getSnapshotBeforeUpdate zu lesen, da es zu Verzögerungen zwischen den „Render“ -Phasenlebenszyklen kommen kann (wie render) und „Commit“ -Phasenlebenszyklen (wie getSnapshotBeforeUpdate und componentDidUpdate).
Fehlergrenzen
Fehlergrenzen sind React-Komponenten, die JavaScript-Fehler an einer beliebigen Stelle in ihrem untergeordneten Komponentenbaum abfangen, diese Fehler protokollieren und anstelle des abgestürzten Komponentenbaums eine Fallback-Benutzeroberfläche anzeigen. Fehlergrenzen fangen Fehler beim Rendern, in Lebenszyklusmethoden und in Konstruktoren des gesamten darunter liegenden Baums ab.
Eine Klassenkomponente wird zu einer Fehlergrenze, wenn sie eine (oder beide) der Lebenszyklusmethoden static getDerivedStateFromError() oder componentDidCatch() definiert. Durch Aktualisieren des Status aus diesen Lebenszyklen können Sie einen unbehandelten JavaScript-Fehler in der folgenden Struktur erfassen und eine Fallback-Benutzeroberfläche anzeigen.
Verwenden Sie Fehlergrenzen nur für die Wiederherstellung nach unerwarteten Ausnahmen; versuchen Sie nicht, sie für den Kontrollfluss zu verwenden.
Weitere Informationen finden Sie unter Fehlerbehandlung in React 16.
Hinweis
Fehlergrenzen fangen nur Fehler in den darunter liegenden Komponenten im Baum ab. Eine Fehlergrenze kann keinen Fehler in sich selbst abfangen.
static getDerivedStateFromError()
static getDerivedStateFromError(error)Dieser Lebenszyklus wird aufgerufen, nachdem ein Fehler von einem Nachkommen ausgelöst wurde component.It empfängt den Fehler, der als Parameter ausgelöst wurde, und sollte einen Wert in den Aktualisierungsstatus zurückgeben.
class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { // Update state so the next render will show the fallback UI. return { hasError: true }; } render() { if (this.state.hasError) { // You can render any custom fallback UI return <h1>Something went wrong.</h1>; } return this.props.children; }}Hinweis
getDerivedStateFromError()wird während der „Render“ -Phase aufgerufen, daher sind Nebenwirkungen nicht zulässig.Verwenden Sie für diese Anwendungsfälle stattdessencomponentDidCatch().
componentDidCatch()
componentDidCatch(error, info)Dieser Lebenszyklus wird aufgerufen, nachdem ein Fehler von einem Nachkommen ausgelöst wurde component.It empfängt zwei Parameter:
-
error– Der Fehler, der ausgelöst wurde. -
info– Ein Objekt mit einemcomponentStackSchlüssel, der Informationen darüber enthält, welche Komponente den Fehler ausgelöst hat.
componentDidCatch() wird während der „Commit“ -Phase aufgerufen, daher sind Nebenwirkungen permitted.It sollte für Dinge wie Protokollierungsfehler verwendet werden:
class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { // Update state so the next render will show the fallback UI. return { hasError: true }; } componentDidCatch(error, info) { // Example "componentStack": // in ComponentThatThrows (created by App) // in ErrorBoundary (created by App) // in div (created by App) // in App logComponentStackToMyService(info.componentStack); } render() { if (this.state.hasError) { // You can render any custom fallback UI return <h1>Something went wrong.</h1>; } return this.props.children; }}Produktions- und Entwicklungs-Builds von React unterscheiden sich geringfügig in der Art und Weise, wie componentDidCatch() Fehler behandelt.
Bei der Entwicklung werden die Fehler bis zu window , dies bedeutet, dass jede window.onerror oder window.addEventListener('error', callback) die Fehler abfangen wird, die von componentDidCatch() abgefangen wurden.
In der Produktion sprudeln die Fehler stattdessen nicht auf, was bedeutet, dass jeder Vorfahren-Fehlerbehandler nur Fehler erhält, die nicht explizit von componentDidCatch() .
Hinweis
Im Fehlerfall können Sie eine Fallback-Benutzeroberfläche mit
componentDidCatch()rendern, indem SiesetStateaufrufen.Verwenden Sie stattdessenstatic getDerivedStateFromError(), um das Fallback-Rendering zu verarbeiten.
Legacy-Lifecycle-Methoden
Die folgenden Lifecycle-Methoden sind als „legacy“ gekennzeichnet. Sie funktionieren immer noch, aber wir empfehlen nicht, sie im neuen Code zu verwenden. In diesem Blogbeitrag erfahren Sie mehr über die Migration von Legacy-Lifecycle-Methoden.
UNSAFE_componentWillMount()
UNSAFE_componentWillMount()Hinweis
Dieser Lebenszyklus wurde zuvor
componentWillMountgenannt. Dieser Name wird bis Version 17 weiter funktionieren. Verwenden Sie denrename-unsafe-lifecyclescodemod, um Ihre Komponenten automatisch zu aktualisieren.
UNSAFE_componentWillMount() wird kurz vor dem Mounten aufgerufen. Es wird vor render() aufgerufen, daher wird das synchrone Aufrufen von setState() in dieser Methode kein zusätzliches Rendering auslösen. Im Allgemeinen empfehlen wir die Verwendung von constructor() stattdessen zum Initialisieren des Status.
Vermeiden Sie die Einführung von Nebenwirkungen oder Komplikationen bei dieser Methode. Verwenden Sie für diese Anwendungsfälle stattdessen componentDidMount() .
Dies ist die einzige Lifecycle-Methode, die beim Server-Rendering aufgerufen wird.
UNSAFE_componentWillReceiveProps()
UNSAFE_componentWillReceiveProps(nextProps)Hinweis
Dieser Lebenszyklus wurde zuvor
componentWillReceivePropsgenannt. Dieser Name wird bis Version 17 weiter funktionieren. Verwenden Sie denrename-unsafe-lifecyclescodemod, um Ihre Komponenten automatisch zu aktualisieren.
Hinweis:
Die Verwendung dieser Lifecycle-Methode führt häufig zu Fehlern und Inkonsistenzen
- Wenn Sie als Reaktion auf eine Änderung der Requisiten einen Nebeneffekt (z. B. Datenabruf oder eine Animation) ausführen müssen, verwenden Sie
componentDidUpdatelebenszyklus statt.- Wenn Sie
componentWillReceivePropsverwendet haben, um einige Daten nur dann neu zu berechnen, wenn sich eine Requisite ändert, verwenden Sie stattdessen einen Memoisierungshelfer.- Wenn Sie
componentWillReceivePropsverwendet haben, um einen Zustand zurückzusetzen, wenn sich eine Requisite ändert, sollten Sie stattdessen eine Komponente vollständig kontrolliert oder vollständig unkontrolliert mit einemkey.Befolgen Sie für andere Anwendungsfälle die Empfehlungen in diesem Blogbeitrag zum abgeleiteten Status.
UNSAFE_componentWillReceiveProps() wird aufgerufen, bevor eine bereitgestellte Komponente neue Requisiten erhält. Wenn Sie den Status als Reaktion auf Requisitenänderungen aktualisieren müssen (z. B. um ihn zurückzusetzen), können Sie this.props und nextProps vergleichen und Statusübergänge mit this.setState() in dieser Methode durchführen.
Beachten Sie, dass, wenn eine übergeordnete Komponente bewirkt, dass Ihre Komponente erneut gerendert wird, diese Methode aufgerufen wird, auch wenn sich die Requisiten nicht geändert haben. Stellen Sie sicher, dass Sie die aktuellen und nächsten Werte vergleichen, wenn Sie nur Änderungen vornehmen möchten.
React ruft UNSAFE_componentWillReceiveProps() nicht mit anfänglichen Requisiten während der Montage auf. Diese Methode wird nur aufgerufen, wenn einige Requisiten der Komponente möglicherweise aktualisiert werden. Der Aufruf von this.setState() löst im Allgemeinen nicht UNSAFE_componentWillReceiveProps() aus.
UNSAFE_componentWillUpdate()
UNSAFE_componentWillUpdate(nextProps, nextState)Hinweis
Dieser Lebenszyklus wurde zuvor
componentWillUpdategenannt. Dieser Name wird bis Version 17 weiter funktionieren. Verwenden Sie denrename-unsafe-lifecyclescodemod, um Ihre Komponenten automatisch zu aktualisieren.
UNSAFE_componentWillUpdate() wird kurz vor dem Rendern aufgerufen, wenn neue Requisiten oder Status empfangen werden. Nutzen Sie dies als Gelegenheit, um Vorbereitungen durchzuführen, bevor ein Update erfolgt. Diese Methode wird nicht für das anfängliche Rendern aufgerufen.
Beachten Sie, dass Sie this.setState() hier nicht aufrufen können; Sie sollten auch nichts anderes tun (z. B. eine Redux-Aktion auslösen), die eine Aktualisierung einer Reaktionskomponente auslösen würde, bevor UNSAFE_componentWillUpdate() zurückkehrt.
Typischerweise kann diese Methode durch componentDidUpdate() ersetzt werden. Wenn Sie in dieser Methode aus dem DOM gelesen haben (z. B. um eine Bildlaufposition zu speichern), können Sie diese Logik auf getSnapshotBeforeUpdate() .
Hinweis
UNSAFE_componentWillUpdate()wird nicht aufgerufen, wennshouldComponentUpdate()false zurückgibt.
Andere APIs
Im Gegensatz zu den obigen Lifecycle-Methoden (die React für Sie aufruft) sind die folgenden Methoden die Methoden, die Sie von Ihren Komponenten aus aufrufen können.
Es gibt nur zwei davon: setState() und forceUpdate().
setState()
setState(updater, )setState() stellt Änderungen am Komponentenstatus in die Warteschlange und teilt React mit, dass diese Komponente und ihre untergeordneten Elemente mit dem aktualisierten Status neu gerendert werden müssen. Dies ist die primäre Methode, mit der Sie die Benutzeroberfläche als Reaktion auf Ereignishandler und Serverantworten aktualisieren.
Stellen Sie sich setState() als Anforderung und nicht als sofortigen Befehl zum Aktualisieren der Komponente vor. Für eine bessere wahrgenommene Leistung kann React es verzögern und dann mehrere Komponenten in einem einzigen Durchgang aktualisieren. React garantiert nicht, dass die Statusänderungen sofort angewendet werden.
setState() aktualisiert die Komponente nicht immer sofort. Es kann Batch oder verschieben Sie das Update bis später. Dies macht das Lesen von this.state direkt nach dem Aufruf von setState() zu einer potenziellen Falle. Verwenden Sie stattdessen componentDidUpdate oder einen setState Rückruf (setState(updater, callback)), von denen beide garantiert ausgelöst werden, nachdem das Update angewendet wurde. Wenn Sie den Status basierend auf dem vorherigen Status festlegen müssen, lesen Sie unten das Argument updater .
setState() führt immer zu einem erneuten Rendern, es sei denn, shouldComponentUpdate() gibt false zurück. Wenn veränderbare Objekte verwendet werden und die bedingte Renderlogik in shouldComponentUpdate() nicht implementiert werden kann, wird durch Aufrufen von setState() nur dann ein unnötiges erneutes Rendern vermieden, wenn sich der neue Status vom vorherigen unterscheidet.
Das erste Argument ist eine updater Funktion mit der Signatur:
(state, props) => stateChangestate ist eine Referenz auf den Komponentenstatus zum Zeitpunkt der Änderung. Es sollte nicht direkt mutiert werden. Stattdessen sollten Änderungen dargestellt werden, indem ein neues Objekt basierend auf den Eingaben von state und props . Angenommen, wir möchten einen Wert im Status um props.step:
this.setState((state, props) => { return {counter: state.counter + props.step};});Sowohl state als auch props, die von der Updater-Funktion empfangen werden, sind garantiert auf dem neuesten Stand. Die Ausgabe des Updaters wird flach mit state .
Der zweite Parameter von setState() ist eine optionale Callback-Funktion, die ausgeführt wird, sobald setState abgeschlossen ist und die Komponente erneut gerendert wird. Im Allgemeinen empfehlen wir, stattdessen componentDidUpdate() für eine solche Logik zu verwenden.
Sie können optional ein Objekt als erstes Argument an setState() anstelle einer Funktion übergeben:
setState(stateChange)Dies führt eine flache Zusammenführung von stateChange in den neuen Zustand durch, z. B. um eine Warenkorbartikelmenge anzupassen:
this.setState({quantity: 2})Diese Form von setState() ist ebenfalls asynchron, und mehrere Aufrufe während desselben Zyklus können gestapelt werden. Wenn Sie beispielsweise versuchen, eine Artikelmenge mehr als einmal im selben Zyklus zu erhöhen, führt dies zu folgendem Ergebnis::
Object.assign( previousState, {quantity: state.quantity + 1}, {quantity: state.quantity + 1}, ...)Nachfolgende Aufrufe überschreiben die Werte früherer Aufrufe im selben Zyklus, sodass die Menge nur einmal erhöht wird. Wenn der nächste Status vom aktuellen Status abhängt, empfehlen wir stattdessen die Verwendung des Updater-Funktionsformulars:
this.setState((state) => { return {quantity: state.quantity + 1};});Weitere Informationen finden Sie unter:
- State and Lifecycle guide
- In depth: When and why are
setState()calls batched? - Im Detail: Warum wird
this.statenicht sofort aktualisiert?
forceUpdate()
component.forceUpdate(callback)Wenn sich der Status oder die Requisiten Ihrer Komponente ändern, wird Ihre Komponente standardmäßig neu gerendert. Wenn Ihre render() -Methode von einigen anderen Daten abhängt, können Sie React mitteilen, dass die Komponente erneut gerendert werden muss, indem Sie forceUpdate() aufrufen.
Wenn Sie forceUpdate() aufrufen, wird render() für die Komponente aufgerufen, wobei shouldComponentUpdate() übersprungen wird. Dies löst die normalen Lebenszyklusmethoden für untergeordnete Komponenten aus, einschließlich der shouldComponentUpdate() -Methode jedes untergeordneten Elements. React aktualisiert das DOM immer noch nur, wenn sich das Markup ändert.
Normalerweise sollten Sie versuchen, alle Verwendungen von forceUpdate() zu vermeiden und nur von this.props und this.state in render() zu lesen.
Klasseneigenschaften
defaultProps
defaultProps kann als Eigenschaft der Komponentenklasse selbst definiert werden, um die Standardrequisiten für die Klasse festzulegen. This is used for undefined props, but not for null props. For example:
class CustomButton extends React.Component { // ...}CustomButton.defaultProps = { color: 'blue'};If props.color is not provided, it will be set by default to 'blue':
render() { return <CustomButton /> ; // props.color will be set to blue }If props.color is set to null, it will remain null:
render() { return <CustomButton color={null} /> ; // props.color will remain null }displayName
The displayName string is used in debugging messages. Normalerweise müssen Sie es nicht explizit festlegen, da es aus dem Namen der Funktion oder Klasse abgeleitet wird, die die Komponente definiert. Möglicherweise möchten Sie ihn explizit festlegen, wenn Sie einen anderen Namen für Debugging-Zwecke anzeigen möchten oder wenn Sie eine Komponente höherer Ordnung erstellen.
Instanzeigenschaften
Requisiten
this.props enthält die Requisiten, die vom Aufrufer dieser Komponente definiert wurden. Eine Einführung in Props finden Sie unter Komponenten und Requisiten.
Insbesondere this.props.children ist eine spezielle Requisite, die normalerweise durch die untergeordneten Tags im JSX-Ausdruck und nicht im Tag selbst definiert wird.
state
Der State enthält spezifische Daten für diese Komponente, die sich im Laufe der Zeit ändern können. Der Status ist benutzerdefiniert und sollte ein einfaches JavaScript-Objekt sein.
Wenn ein Wert nicht für das Rendern oder den Datenfluss verwendet wird (z. B. eine Timer-ID), müssen Sie ihn nicht in den Status versetzen. Solche Werte können als Felder auf der Komponenteninstanz definiert werden.
Weitere Informationen zum Status finden Sie unter Status und Lebenszyklus.
Mutieren Sie niemals this.state direkt, da das Aufrufen von setState() danach die von Ihnen vorgenommene Mutation ersetzen kann. Behandle this.state als ob es unveränderlich wäre.