reactjs - without - É melhor definir o estado no construtor ou usar inicializadores de propriedades?




render react js (2)

De acordo com this documentação babel, a maneira correta de usar o ES6 + com o React é inicializar componentes 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,
  }
}

Mas alguns exemplos oficiais, como o próprio módulo React DnD de Dan Abramov, usam ES6 +, mas ainda definem estado dentro do construtor:

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

Agora Dan Abramov, sendo um colaborador significativo do React, provavelmente sabe que pode definir o estado fora do construtor, mas ainda assim opta por fazê-lo dentro do construtor.

Então, eu só estou me perguntando qual caminho é melhor e por quê?


Eles são equivalentes porque a proposta de campo de classe é um açúcar sintático para o código do corpo do construtor.

Caso não haja necessidade de construtor explícito (criando variáveis ​​locais temporárias, etc), o constructor pode ser omitido em favor dos campos de classe.

O problema com o construtor explícito é que os super argumentos ( props ) geralmente são omitidos por engano, isso pode resultar em problemas:

constructor() {
    super();
    this.state = { foo: this.props.foo } // this.props is undefined
}

Construtor explícito pode ser benéfico para facilitar a leitura. Os métodos são convencionais colocados abaixo do constructor , mesmo nas propriedades da seta. Isso não funcionará conforme o planejado, porque os campos de classe são atribuídos na ordem em que foram listados:

state = { foo: { method: this.someMethod } } // this.someMethod is undefined

someMethod = () => ...;

Nesse caso, o construtor explícito pode resultar em um código mais legível:

constructor(props) {
    super(props);

    // <-- this is the place where this.someMethod is really assigned

    this.state = { foo: { method: this.someMethod } }
}

someMethod = () => ...;





ecmascript-next