web-dev-qa-db-fra.com

Que fait l'appel super () dans un constructeur React?

Learning a réagi à partir de docs et est tombé sur cet exemple:

class Square extends React.Component {
  constructor() {
    super();
    this.state = {
      value: null,
    };
  }
  ...
}

Selon Mozilla , super vous permet d’utiliser this dans le constructeur. Existe-t-il une autre raison d'utiliser une super autonome (je sais que super vous permet également d'accéder aux méthodes de la classe mère), mais avec React, existe-t-il un autre cas d'utilisation consistant à appeler super() seul?

javascriptreactjsconstructorecmascript-6
41
stackjlei

super() est appelé dans un composant react uniquement s'il a un constructeur. Par exemple, le code ci-dessous ne nécessite pas de super:

class App extends React.component {
    render(){
        return <div>Hello { this.props.world }</div>;
    }
}

Cependant, si nous avons un constructeur, alors super() est obligatoire:

class App extends React.component {
    constructor(){
        console.log(this) //Error: 'this' is not allowed before super()

    }
}

La raison pour laquelle this ne peut pas être autorisé avant super() est que this n'est pas initialisé si super() n'est pas appelé. Cependant, même si nous n'utilisons pas this, nous avons besoin d'un super() dans un constructeur car ES6 class constructors MUST call super if they are subclasses. Ainsi, vous devez appeler super() tant que vous avez un constructeur. (Mais une sous-classe ne doit pas nécessairement avoir un constructeur).

Nous appelons super(props) dans le constructeur si nous devons utiliser this.props, par exemple:

class App extends React.component{
    constructor(props){
        super(props);
        console.log(this.props); // prints out whatever is inside props

    }
}

J'espère pouvoir le préciser.

58
Shubham Khatri

super() appelle la constructor de sa classe parent. Cela est nécessaire lorsque vous devez accéder à certaines variables de la classe parente. 

Dans React, lorsque vous appelez super avec des accessoires. React rendra props disponible dans le composant via this.props. Voir exemple 2 ci-dessous

sans super()

class A {
  constructor() {
    this.a = 'hello'
  }
}

class B extends A {
  constructor(){
    console.log(this.a) //throws an error
  }
}

console.log(new B())

avec super()

class A {
  constructor(props) {
    this.props = props
  }
}

class B extends A {
  constructor(props) {
    super(props)
    console.log(this.props)
  }
}

console.log(new B({title: 'hello world'}))

J'espère que cela t'aides!

55
Pranesh Ravi

Lors de l'implémentation du constructeur pour un React.Component subclass, vous devez appeler super(props) avant toute autre instruction. Sinon, this.props sera undefined dans le constructeur, ce qui peut entraîner des bogues.

0
sg28