¿Es mejor definir el estado en constructor o usando inicializadores de propiedad?
De acuerdo con esta documentación de babel, la forma correcta de usar ES6+ con React es a componentes iniciales como este:
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,
}
}
Pero algunos ejemplos oficiales, como el propio módulo de Dan Abramov React DnD, usa ES6+ pero todavía define el estado dentro del constructor:
constructor(props) {
super(props);
this.moveCard = this.moveCard.bind(this);
this.state = {
// state stuff
}
}
Ahora Dan Abramov, siendo un contribuyente significativo a React, probablemente sabe que puede definir el estado fuera del constructor, pero todavía opta por hacerlo dentro del constructor.
Así que estoy solo me pregunto qué camino es mejor y por qué?
2 answers
Creo que es una cuestión de preferencia personal. Transpiran exactamente lo mismo.
- Propiedad de clase: 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
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-13 11:18:08
El código de Dan en realidad tiene un error sutil, por lo que recomiendo usar los inicializadores siempre que sea posible. Los constructores de componentes de React toman dos argumentos-props y el contexto. No lo está pasando al constructor padre y podría ser fácilmente perdido por algún otro desarrollador que lo necesitara.
A veces no tienes elección, como cuando el inicializador depende de los argumentos del constructor, así que recuerda pasar todos los argumentos a la padre.
Después de probar algunas cosas, parece que React no tiene el problema en el que estaba pensando. Puedes pasar lo que quieras al constructor padre y estará bien. Por ejemplo:
class MyComponent extends React.Component {
constructor(props) {
super({})
}
render() {
// this.props will still be set correctly here
}
}
Todavía recomiendo usar los inicializadores ya que no tener que llamar al constructor padre es una cosa menos en la que pensar.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-04-05 23:52:07