reactjs - with - why super props react




Qual é a diferença entre "super()" e "super(adereços)" no React ao usar as classes es6? (7)

Ao implementar a função constructor() dentro de um componente React, super() é um requisito. Lembre-se de que seu componente MyComponent está estendendo ou emprestando funcionalidades da classe base React.Component .

Essa classe base possui uma função constructor() própria que possui algum código para configurar nosso componente React para nós.

Quando definimos uma função constructor() dentro de nossa classe MyComponent , estamos essencialmente substituindo ou substituindo a função constructor() que está dentro da classe React.Component , mas ainda precisamos garantir que todo o código de instalação dentro desse constructor() ainda é chamada.

Portanto, para garantir que a React.Component constructor() do React.Component seja chamada, chamamos super(props) . super(props) é uma referência à função constructor() parents constructor() , isso é tudo.

Temos que adicionar super(props) toda vez que definirmos uma função constructor() dentro de um componente baseado em classe.

Se não o fizermos, veremos um erro dizendo que precisamos chamar de 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:

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

      this.state = {};
   }

  // React says we have to define render()
  render() {
    return <div>Hello world</div>;
  }
};

Portanto, definimos nosso método constructor() , inicializamos nosso objeto state criando um objeto JavaScript, atribuindo uma propriedade ou um par 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.

Quando é importante passar props para super() e por quê?

class MyComponent extends React.Component {
  constructor(props) {
    super(); // or super(props) ?
  }
}

Aqui está o violino que eu criei : jsfiddle.net . Ele mostra que os props não estão atribuídos no construtor por padrão. Pelo que entendi, eles são asseded no método React.createElement . Portanto, super(props) deve ser chamado apenas quando o construtor da superclasse atribui manualmente props a this.props . Se você apenas estender o React.Component chamando super(props) não fará nada com adereços. Talvez isso seja alterado nas próximas versões do React.


Conforme código fonte

function ReactComponent(props, context) {
  this.props = props;
  this.context = context;
}

você deve passar props toda vez que tiver adereços e não os colocar this.props manualmente.


Dan Abramov escreveu um artigo sobre este tópico:

overreacted.io/why-do-we-write-super-props

E a essência disso é que é útil ter o hábito de contorná- lo para evitar esse cenário, que sinceramente, não acho improvável que isso aconteça:

// Inside React
class Component {
  constructor(props) {
    this.props = props;
    // ...
  }
}

// Inside your code
class Button extends React.Component {
  constructor(props) {
    super(); // 😬 We forgot to pass props
    console.log(props);      // ✅ {}
    console.log(this.props); // 😬 undefined 
  }
  // ...
}

Neste exemplo, você está estendendo a classe React.Component e, de acordo com a especificação do ES2015, um construtor de classe filho não pode fazer uso this até que super() seja chamado; Além disso, os construtores da classe ES2015 precisam chamar super() se forem subclasses.

class MyComponent extends React.Component {
  constructor() {
    console.log(this); // Reference Error
  }

  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

Por contraste:

class MyComponent extends React.Component {
  constructor() {
    super();
    console.log(this); // this logged to console
  }

  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

Mais detalhes de acordo com esta excelente resposta de estouro de pilha

Você pode ver exemplos de componentes criados estendendo a classe React.Component que não chama super() mas você notará que eles não têm um constructor , por isso não é necessário.

class MyOtherComponent extends React.Component {
  render() {
    return <div>Hi {this.props.name}</div>;
  }
}

Um ponto de confusão que já vi de alguns desenvolvedores com quem conversei é que os componentes que não têm constructor e, portanto, não chamam super() nenhum lugar, ainda têm this.props disponíveis no método render() . Lembre-se de que esta regra e essa necessidade de criar uma ligação this para o constructor se aplicam apenas ao constructor .


Para a versão 16.6.3 do react, usamos super (props) para inicializar o nome do elemento de estado : this.props.name

constructor(props){
    super(props);        
}
state = {
  name:this.props.name 
    //otherwise not defined
};







ecmascript-6