7

Por que eu devo usar props dentro do constructor e do props?

constructor(props){super(props)}
  • Por que usar props no constructor?
  • Por que usar props no super?
  • Por que usar super?
5
  • Porque quando o elemento é renderizado, é criada uma instância dele, nessa instanciação é passado as propriedades (new MyElement({propName: 'propValue'}). O super serve para chamar o construtor da classe estendida, se faz isso porque o React realiza mais algumas coisas com essas propriedades
    – Costamilam
    Commented 29/12/2018 às 18:31
  • A passagem de props pela instancia é opcional. Pode ser usada se quiser fazer algo com elas no construtor. Se chamar construtor() {super()} à partida irá funcionar. Commented 29/12/2018 às 20:55
  • Mas quais seriam essas props que vem pelo constructor? tento dar um console.log nelas, mas não consigo
    – user135023
    Commented 29/12/2018 às 22:01
  • Este artigo escrito por um dos membros da equipe do React explica essa necessidade. Leia-o arqui. Commented 30/06/2019 às 0:12
  • Tem um artigo muito bom do Dan Abramov(Um dos principais desenvolvedores do Redux e figura super relevante do React)sobre isso: overreacted.io/why-do-we-write-super-props Fica a dica inclusive de um ótimo nome para seguir para quem quer trabalhar com React. Commented 13/02/2020 às 3:30

2 Respostas 2

6

No React, quando se cria um componente statefull, deve se estender uma Classe Javascript Nativa, com o React.Component ficando:

class Container extends React.Component {
  render() {
    return (
      <div>
      </div>
    );
  };
}

Sendo assim a propriedade props pertence ao React.Component, e para acessar o conteúdo do React.Component na montagem da classe Container, deve se usar o super para injetar as propriedades (props, métodos) assim que o constructor for chamado. Ficando deste modo:

class Container extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      list: props.list
    }
  }

  render() {
    return (
      <div>
      </div>
    );
  };
}

Por isso a definição do MDN diz que:

A palavra-chave super é usada para acessar o objeto pai de um objeto, em outros casos, é usada para acessar a classe pai de uma classe.

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/super

2

Por que usar super?

A palavra-chave super é usada para acessar o objeto pai de um objeto, em outros casos, é usada para acessar a classe pai de uma classe.

Quando usada no construtor de uma classe, super deve ser usado apenas uma vez, e antes que a palavra-chave this possa ser usada.

Por que usar props no constructor?

Só faz sentido utilizá-la no construtor se você quer inicializar o state baseado nas props. Ou se você quiser usar algum método passado via props.

Exemplo:

class Pai extends React.Component {
  render() {
    return (
      <div>
        <Filho num={0} />
        <Filho num={10} />
        <Filho num={20} />
      </div>
    );
  };
}

class Filho extends React.Component {
  constructor(props) {
    super();

    this.state = {
      num: props.num,
    };
  };

  handleClick = () => {
    const {num} = this.state;
    this.setState({ num: num + 1});
  };

  render() {
    const { num } = this.state;

    return (
      <div>
        num = {num}
        <button
          onClick={this.handleClick} 
        >
          +
        </button>
      </div>
    );
  };
}

Demo no codepen

Por que usar props no super?

Você pode usar super() ou super(props). A única diferença é que usar super(props) fará com que this.props seja idêntico a props.

Você deve fazer log-in para responder a esta pergunta.