Warum getDerivedStateFromProps statt componentDidUpdate?

Als gelesen in diese Reagieren Github issue ich sehe mehr und mehr, dass

die Kosten der render() ist relativ klein

In Reagieren 16.3, ich Frage mich, warum würde man mit dem neuen getDerivedStateFromProps statt componentDidUpdate?

Vorstellen, in diesem Beispiel:

getDerivedStateFromProps(nextProps, prevState) {
  if (!prevState.isModalOpen && nextProps.isReady) {
       return { isModalOpen: true };
  }
}

versus

componentDidUpdate(prevProps, prevState) {
  if (!prevState.isModalOpen && this.props.isReady) {
        this.setState({ isModalOpen: true });
  }
}

Später scheint einfacher, nur weil es mit nur bestehende API und sieht genauso aus wie das, was wir tun, in componentWillReceiveProps, so sehe ich nicht, warum die Nutzer gehen würde, für getDerivedStateFromProps? Was ist der nutzen?

Dank!

  • Hat mich gefragt, diese als gut. Es scheint wie eine einzige bequeme Methode, tun die gleiche Logik wie bei der Initialisierung der Komponente und der update-Komponente. In Reagieren 15 ich habe geschrieben, eine Reihe von Komponenten, die Aufrufe der gleichen Funktion im Konstruktor & CWP. Wo, wie dies wirkt, daß einzelne Funktion für Sie. twitter.com/dan_abramov/status/960305777968930816
  • Ok, ich denke, du hast Recht, dies ist aufgerufen, die init -, während die cDU ist aufgerufen, nur nach dem Rendern. Aber ich glaube, der einzige Unterschied zwischen den beiden Funktionen ist, dass es 1 mehr wiedergeben, wenn Sie Dinge tun, in der cDU.
InformationsquelleAutor adriendenat | 2018-03-23
  1. 22

    So Dan Abramov antwortete auf Twitter und es scheint, wie es gibt 2 Gründe, warum Sie verwenden sollten getDerivedStateFromProps statt componentDidUpdate + setState:

    setState in componentDidUpdate verursacht zusätzliche render (nicht direkt wahrnehmbar für den Benutzer, sondern es verlangsamt die app). Und Sie render-Methode kann nicht annehmen, dass der Staat bereit ist, (weil es nicht das erste mal).

    • Aufführungen Grund: es vermeidet unnötige re-Rendern.
    • Als getDerivedStateFromProps wird aufgerufen, bevor das rendering auf init, können Sie initialisieren Sie Ihren Staat in dieser Funktion, anstatt einen Konstruktor zu tun.
      Aktuell, Sie hatten einen Konstruktor oder componentWillMount init Ihrem Zustand vor der ersten Wiedergabe.
    • Aber nur getDerivedPropsFromState wenn Sie Requisiten zu Staat nicht?
    • ja. Alles, was nicht zur Rückgabe des neuen Staates sollte in componentDidMount wie gesagt von Dan Abramov in den Kommentar unten.
    InformationsquelleAutor adriendenat
  2. -1

    getDerivedStateFromProps ist eigentlich Ersatz für componentWillReceiveProps und componentDidMount ist nicht veraltet.

    Ich bin mir ziemlich sicher, es war die Gemeinschaft, die beschlossen, eine statische Methode mit diesem Namen.

    Den Grund für diese änderung ist, dass componentWillReceiveProps war eine der Methoden, die zu Verwirrung geführt und weiter, bis einige Speicherlecks in Anwendungen des Benutzers:

    Viele dieser Probleme sind noch verschärft, indem eine Teilmenge der Komponente
    Lebenszyklen (componentWillMount, componentWillReceiveProps, und
    componentWillUpdate). Auch diese passieren, um die Lebenszyklen, die
    verursachen die meisten Verwirrung innerhalb der Reagieren Gemeinschaft. Für diese
    Gründen, werden wir missbilligen diese Methoden zugunsten einer besseren
    alternativen.

    Hier ist die Dan Abramov tweet auch das macht das deutlicher:

    Jedoch, dies bedeutet, dass wir einen Teil unserer Möglichkeiten mit
    componentWillReceiveProps() im 17. Wir denken getDerivedStateFromProps()
    macht die gleiche Arbeit besser und weniger verwirrend. Es kommt auch vor, dass
    cWRP() wirklich versaut unsere Pläne für Daten-abrufen Funktionen, die
    vielleicht in der pipeline. ?

    • Vielen Dank für deine Erklärungen, aber ich denke, dass dies nicht wirklich Antwort auf meine Frage, warum ich es verwenden soll, anstatt nur darum, die Logik innerhalb componentDidMount und vergessen, dass die neue Funktion?
    • Ihre Annahmen sind falsch 🙂 Woher kommt es, dass Sie verwenden sollten getDerivedStateFromProps statt componentDidUpdate ? Weil das sind zwei verschiedene hook-Methoden.
    • Aber warum führten Sie diese Funktion dann, wenn ich tun kann, die genaue gleichen Sache, in componentDidMount? Das ist, was ich verlange.
    • es hat nichts zu tun mit componentDidUpdate beide werden als bei anderen Schritt des Komponenten-Lebenszyklus und verschiedene use-cases. Sie stellten getDerivedStateFromProps um Verwirrung zu vermeiden und verlassen, nur eine Methode, statt drei.
    • Die Tatsache, dass getDerivedStateFromProps ist statisch ein problem verursacht. Wenn Sie die Requisiten zu Holen, Informationen zum festlegen des Zustands, wie kann ich für eine bestimmte Komponenteninstanz ohne Globale Variablen (das wären dann die, die nicht Instanz-spezifisch)?
    • Sie sollten nicht abholen alles in getDerivedStateFromProps. Das ist es, was componentDidUpdate oder componentDidMount sind für.
    • Darüber hinaus mit asynchronen Modus Reagieren kann, rufen mehrmals die getDerivedStateFromProps - Methode anstelle der componentDidMount/Update Methoden. (Also kein abholen in getDerivedStateFromProps) reactjs.org/docs/...

    InformationsquelleAutor Tomasz Mularczyk
Schreibe einen Kommentar