¿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é?

Author: Felix Kling, 2016-06-13

2 answers

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.

 1
Author: Gunchars,
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