Quando é que é importante passar propspara super(), e por quê?
Uma boa explicação também pode ser encontrada em overreacted.io/why-do-we-write-super-props
Há apenas um motivo para passar propspara super():
Quando você deseja acessar this.propsno construtor.
Não passando:
Note que passar ou não passar propsa supertem nenhum efeito sobre os usos posteriores do this.propslado de fora constructor. Ou seja render, os shouldComponentUpdatemanipuladores de eventos sempre têm acesso a ele.
Isso é explicitamente dito na resposta de Sophie Alpert a uma pergunta semelhante.
A documentação - Estado e Ciclo de Vida, Adicionando Estado Local a uma Classe, ponto 2 - recomenda:
Os componentes de classe sempre devem chamar o construtor base com props.
No entanto, nenhum motivo é fornecido. Podemos especular que seja por causa de subclassificação ou por compatibilidade futura.
(Obrigado @MattBrowne pelo link)
— Robin Pokorny
Eu acho que você está correto, apesar das outras respostas terem mais votos. this.propsé, a undefinedmenos que seja passado para super(). De qualquer forma, não afeta a renderização ou a disponibilidade posterior this.propsda render()função.
@Rotareti, não, na verdade o resto da classe não depende dessa construção, esse é o ponto. O componente recebe props de uma maneira diferente da do parâmetro construtor. E desde que você passa os adereços iniciais super, você tem referência a eles no construtor.
De acordo com a documentação Reagir, você deve sempre passar propspara super(): facebook.github.io/react/docs/... . Não sei por que, já que, como você menciona, this.propsé acessível de outros métodos de qualquer maneira ... talvez eles estejam recomendando isso para compatibilidade futura, caso versões futuras do React possam querer fazer algo com propso construtor?
Talvez eu esteja apenas abrindo uma lata de worms aqui, mas por que passar propspara superquando, como você apontou, o propsparâmetro está disponível para uso no construtor e this.propsfunciona em qualquer outro lugar? Existe algum benefício em usar this.propsapenas props? É uma má prática desestruturar propso construtor? Acho que ainda estou deixando de ver um caso quando você já tinha precisa passar propspara super, mas eu estou disposto a apostar que é apenas a minha ignorância, ha.
— Indiesquidge
Se você usar super(props), poderá chamar métodos que usam this.props do construtor , como this.doStuffUsingThisDotProps(), sem ter que passar o parâmetro props para esses métodos / funções. Acabei de escrever um construtor fazendo isso, o que aparentemente exigiria que eu o usasse super(props)primeiro, de acordo com as respostas a esta pergunta.
Neste exemplo, você está estendendo a React.Componentclasse e, de acordo com a especificação do ES2015, um construtor de classe filho não pode usar thisaté super()que seja chamado; Além disso, os construtores de classe do ES2015 precisam chamar super()se forem subclasses.
Mais detalhes de acordo com esta excelente resposta de estouro de pilha
Você pode ver exemplos de componentes criados estendendo a React.Componentclasse que não chama, super()mas notará que estes não possuem um constructor, portanto, por que não é necessário.
Um ponto de confusão que vi de alguns desenvolvedores com quem conversei é que os componentes que não possuem constructore, portanto, não chamam em super()lugar algum, ainda estão this.propsdisponíveis no render()método. Lembre-se de que esta regra e essa necessidade de criar uma thisligação para o constructorúnico se aplicam ao constructor.
Muito obrigado pela sua resposta, mas ela não responde à minha pergunta original (diferença entre super()e super(props)).
Quando você passa propspara super, os objetos são atribuídos this. Dê uma olhada no seguinte cenário:
No entanto, quando você faz:
— Nahush Farkande
A melhor resposta da lista.
— Basavaraj Hadimani
Esta resposta está parcialmente correta. Este exemplo é apenas para o método construtor. Por exemplo, mesmo se você não escrever super (props), this.props no método render ainda estará atribuído e disponível. A única razão mencionada acima é ao usar this.props no construtor.
— Ofear
Conforme código fonte
você deve passar propstoda vez que tiver adereços e não os colocar this.propsmanualmente.
Ainda não estou claro sobre isso. se você observar esses dois componentes , poderá ver uma chamada super(props)e a outra não. Mas seus consumidores definem adereços. Qual é a diferença?
— Kyeotic
Isso significa isso this.props = propse super(props)é a mesma coisa?
— reectrix
Isso não é verdade. ReactElement realmente define a this.propspartir de 'fora' - independentemente do que é feito no construtor.
Dan Abramov escreveu um artigo sobre este tópico:
Por que escrevemos super (adereços)?
E a essência disso é que é útil ter o hábito de contorná- lo para evitar esse cenário. Honestamente, não acho improvável que isso aconteça:
— Alfonso Pérez
super() é usado para chamar o construtor pai.
super(props)passaria propspara o construtor pai.
Do seu exemplo, super(props)chamaria o React.Componentconstrutor de passagem propscomo argumento.
Mais informações em super: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super
— kspence
Sim, é o que faz. Mas porque ? E quando é uma das duas formas necessárias no React?
— Bergi 28/09/2015
Ao implementar a constructor()função dentro de um componente React, super()é um requisito. Lembre-se de que seu MyComponentcomponente está estendendo ou emprestando funcionalidades da React.Componentclasse base.
Essa classe base tem uma constructor()função própria que possui algum código para configurar nosso componente React para nós.
Quando definimos uma constructor()função dentro de nossa MyComponentclasse, estamos essencialmente substituindo ou substituindo a constructor()função que está dentro da React.Componentclasse, mas ainda precisamos garantir que todo o código de instalação dentro dessa constructor()função ainda seja chamado.
Assim, para garantir que o React.Component's constructor()função é chamada, chamamos super(props). super(props)é uma referência à constructor()função dos pais , isso é tudo.
Temos que adicionar super(props)sempre que definirmos uma constructor()função dentro de um componente baseado em classe.
Caso contrário, veremos um erro dizendo que temos que ligar super(props).
A razão inteira para definir essa função constructor()é inicializar nosso objeto de estado.
Então, para inicializar nosso objeto de estado, sob a super chamada, vou escrever:
Assim, definimos nosso constructor()método, inicializamos nosso objeto de estado criando um objeto JavaScript, atribuindo uma propriedade ou um par de chave / valor a ele, atribuindo o resultado disso a this.state. Agora é claro que este é apenas um exemplo aqui, então eu realmente não atribuí um par de chave / valor ao objeto de estado, é apenas um objeto vazio.
Aqui está o violino que eu fiz: jsfiddle.net . Mostra que os adereços não estão atribuídos no construtor por padrão. Pelo que entendi, eles são avaliados no método React.createElement. Assim super(props)deve ser chamado somente quando assings construtor manualmente da superclasse propspara this.props. Se você apenas estender a React.Componentchamada super(props), nada fará com adereços. Talvez isso seja alterado nas próximas versões do React.
— beshanoe
Aqui não conseguiremos isso no construtor, portanto ele retornará indefinido, mas poderemos buscá-lo fora da função do construtor
Se estivermos usando super (), também podemos buscar a variável "this" dentro do construtor
Então, quando estamos usando super (); seremos capazes de buscar isso, mas this.props será indefinido no construtor. Mas, além do construtor, this.props não retornará indefinido.
Se usarmos super (props), poderemos usar o valor this.props também dentro do construtor
Resposta de Sophie Alpert
Se você quiser usar this.props no construtor, precisará passar props para super. Caso contrário, isso não importa, porque o React define .props na instância de fora imediatamente após chamar o construtor.
Para a versão 16.6.3 do react, usamos super (props) para inicializar o nome do elemento de estado : this.props.name