Ist es besser, den Status im Konstruktor zu definieren oder Eigenschaftsinitialisierungen zu verwenden?

Question

Nach this babel Dokumentation, die richtige Art und Weise mit ES6 + zu verwenden Reagieren auf Ausgangskomponenten ist wie folgt:

class Video extends React.Component { 
    static defaultProps = { 
    autoPlay: false, 
    maxLoops: 10, 
    } 
    static propTypes = { 
    autoPlay: React.PropTypes.bool.isRequired, 
    maxLoops: React.PropTypes.number.isRequired, 
    posterFrameSrc: React.PropTypes.string.isRequired, 
    videoSrc: React.PropTypes.string.isRequired, 
    } 
    state = { 
    loopsRemaining: this.props.maxLoops, 
    } 
} 

Aber einige offizielle Beispiele, wie Dan Abramov eigenen React DnD Modul verwendet ES6 + sondern definiert noch Staat innerhalb der Konstruktor:

constructor(props) { 
    super(props); 
    this.moveCard = this.moveCard.bind(this); 
    this.state = { 
     // state stuff 
    } 
} 

Jetzt Dan Abramov, einen bedeutenden Beitrag zu sein, weiß wahrscheinlich zu reagieren, dass er Staat außerhalb der Konstruktor definieren, noch setzt sie noch im Konstruktor zu tun.

Also frage ich mich nur, welcher Weg besser ist und warum?

Answer 1

Ich glaube, es ist eine Frage der persönlichen Vorliebe. Sie transpilieren auf genau dasselbe.

• Klasse Property: https://babeljs.io/repl/#?evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage-1%2Cstage-2%2Cstage-3&experimental=false&loose=false&spec=false&code=class%20Video%20%7B%0A%20%20state%20%3D%20%7B%0A%20%20%20%20loopsRemaining%3A%20this.props.maxLoops%2C%0A%20%20%7D%0A%7D
• Constructor: https://babeljs.io/repl/#?evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage-1%2Cstage-2%2Cstage-3&experimental=false&loose=false&spec=false&code=class%20Video%20%7B%0A%20%20constructor()%20%7B%0A%20%20%20%20this.state%20%3D%20%7B%0A%20%20%20%20%20%20loopsRemaining%3A%20this.props.maxLoops%2C%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D

Answer 2

Dans Code hat tatsächlich einen subtilen Fehler, weshalb ich die initializers empfehlen die Verwendung, wenn möglich. React Komponentenkonstruktoren nehmen zwei Argumente - Requisiten und den Kontext. Er übergibt es nicht an den übergeordneten Konstruktor, und es könnte leicht von einem anderen Entwickler übersehen werden, der es benötigt.

Manchmal haben Sie keine Wahl, wie wenn der initializer hängt von den Konstruktor Argumente, so dass nur alle Argumente an die Eltern weitergeben erinnern.

Nachdem ich ein paar Dinge ausprobiert habe, sieht es so aus, als hätte React nicht das Problem, an das ich gedacht habe. Sie können alles, was Sie wollen, an den Elternkonstruktor übergeben, und es ist in Ordnung. Z.B .:

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

    render() { 
    // this.props will still be set correctly here 
    } 
} 

Ich empfehle immer noch die initializers Verwendung als nicht den übergeordneten Konstruktor aufrufen zu müssen ist eine Sache weniger, um darüber nachzudenken.