Was ist der Unterschied zwischen der Verwendung von Konstruktor vs. Zustand = {}, um den Zustand in der Reaktionskomponente zu deklarieren?

Ich habe festgestellt, dass es zwei Möglichkeiten gibt, den Zustand in der Klassenkomponente wie unten zu deklarieren

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: 'John'
        }
    }

    render() {
        return  <div>{this.state.name}</div>
    }

}

und

class App extends Component {
    state = {
       name: 'John'
    }

    render() {
        return  <div>{this.state.name}</div>
    }

}

Was ist der Unterschied zwischen diesen beiden?

Sie sind ungefähr gleichwertig. Der wesentliche Unterschied besteht darin, dass der Initialisierer im zweiten Beispiel vorher ausgeführt wird constructor.

Der zweite Ansatz verwendet Klassenfelder Vorschlag.

Es ist noch kein Teil des ECMAScript-Standards, daher müssen Sie den Transpiler richtig einrichten, um den zweiten Ansatz zu verwenden.

UPD Schauen Sie sich an Babel-Ausgabe um besser zu verstehen, wie öffentliche Instanzfelder funktionieren.

Verwenden Sie den Konstruktor, wenn Sie speichern möchten props Daten hinein state

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      name: 'John'
    }
  }
}

Andernfalls können Sie die direkt einstellen state für hartcodierte Daten

class App extends Component {
  state = {
    name: 'John'
  }
}

Wenn Sie einer Klasse eine Methode hinzufügen, wird sie tatsächlich zum Prototyp der Funktion hinzugefügt. so:

class Same{
  thing() {}
}

// Equivalent to:

function Same() {}
Same.prototype.thing = function () {}

Sache wird einmal definiert und von allen Instanzen der Klasse gemeinsam genutzt.

Wenn Sie es umgestalten, um Klassenfelder wie folgt zu verwenden:

class Animal {
  thing() {}
  anotherThing = () => {} // Class Field
}

// Equivalent to:

function Animal () {
  this.anotherThing = function () {}
}

Animal.prototype.thing = function () {}

etwas anderes wird auf jeder neu erstellten Instanz und nicht auf dem Prototyp definiert.

Entwicklungserfahrung vs. Leistung

Es ist ein Kompromiss, den Sie berücksichtigen sollten. Klassenfelder lassen Ihren Code lesbar und sauber aussehen. Class Fields behält jedoch eine Kopie von etwas anderes in jedem Ihrer Fälle.

Daher sollten Sie sorgfältig überlegen, ob Sie sie verwenden möchten.