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

Question

L'apprentissage de Réagir à partir de la docs et suis 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. Est-il une autre raison pour utiliser un stand alone super (je sais, super vous permet d'accéder à un parent de la classe de méthodes, aussi), mais à Réagir est-il un autre cas d'usage de l'appeler juste super() par soi-même?

Answer 1

super() seront appelle l' constructor de ses parent classe. Ceci est nécessaire lorsque vous avez besoin d'accéder à certaines variables de la classe parent.

À Réagir, lorsque vous appelez super avec des accessoires. Réagir feront props disponibles à travers le composant par l'intermédiaire d' this.props. Voir l'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'}))

Espérons que cette aide!

Answer 2

super() est appelée à l'intérieur d'une réagir composant uniquement si elle a un constructeur. Par exemple, le code ci-dessous ne nécessite pas super:

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

Cependant, si on a un constructeur alors super() est obligatoire:

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

    }
}

La raison pourquoi this ne peut pas être autorisé avant super() est parce qu' this est non initialisée si super() n'est pas appelé. Cependant, même si nous ne sommes pas à l'aide de this nous avons besoin d'un super() à l'intérieur d'un constructeur, car ES6 class constructors MUST call super if they are subclasses. Ainsi, vous devez vous appelez super() tant que vous avez un constructeur. (Mais une sous-classe n'ont pas besoin d'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 que je pourrais le rendre clair.

Answer 3

Lors de la mise en œuvre du constructeur pour 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.

Answer 4

Permet de le rendre clair. Pour utiliser ce mot clé, nous devrions utiliser le mot clé super avant celui-ci. quoi ?, Oui !, Super est utilisé pour appeler le constructeur de la classe parente. Maintenant vous avez la question ici pourquoi avons-nous besoin d'appeler le constructeur parent? La solution consiste à initialiser les valeurs de propriétés auxquelles nous nous référons via ce mot clé.