Initialisierungsstatus im Konstruktor im Vergleich zum Status

Question

Was ist der Unterschied zwischen diesen beiden Möglichkeiten, den Anfangszustand in ES6 neben dem Zugriff auf die Requisiten festzulegen?

constructor(props) { 
    super(props); 

    this.state = { 
     highlighted: 5, 
     backgroundColor: '#f3f3f3', 
    } 
} 

vs:

state = { 
     highlighted: 5, 
     backgroundColor: '#f3f3f3', 
    } 

Answer 1

Erstere nur Syntax Suger für die letztere, so Zugriff auf Konstruktorargumente ist wirklich der einzige Unterschied.

This is how it gets transpiled by Babel nur babel-preset-stage-2 Preset mit der vorgeschlagenen Klasseneigenschaften Syntax zu handhaben:

class Example { 
    state = { 
    highlighted: 5, 
    backgroundColor: '#f3f3f3', 
    } 
} 

Ausgang:

class Example { 
    constructor() { 
    this.state = { 
     highlighted: 5, 
     backgroundColor: '#f3f3f3' 
    }; 
    } 
} 

---

Dies ist auch deshalb eine Funktion unter Verwendung einer Klasse Eigenschaft Pfeil Funktion bindet erklärt es zu der Instanz.

It gets moved into the constructor, wobei der this Wert, den die Pfeilfunktion bewahrt, die neue Instanz ist.

class Example { 
    boundFunction =() => { 
    // ... 
    } 
} 

Ausgang:

class Example { 
    constructor() { 
    this.boundFunction =() => { 
     // ... 
    }; 
    } 
}