web-dev-qa-db-fra.com

que fait super () sans aucun argument?

J'apprends à réagir à partir de docs , mais je ne sais pas ce que fait la super() dans cet exemple. Habituellement, cela ne prend-il pas les arguments passés à la création d'une nouvelle instance, puis appelle la méthode constructeur de React.Component pour incorporer ces arguments dans l'instance? Que fait-il sans argument?

class LikeButton extends React.Component {
  constructor() {
    super();
    this.state = {
      liked: false
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({liked: !this.state.liked});
  }
  render() {
    const text = this.state.liked ? 'liked' : 'haven\'t liked';
    return (
      <div onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </div>
    );
  }
}

ReactDOM.render(
  <LikeButton />,
  document.getElementById('example')
);
javascriptreactjsecmascript-6super
29
mangocaptain

Dans ES6, les classes dérivées doivent appeler super() si elles ont un constructeur. En réaction, tous les composants s'étendent de la classe Component.

Vous n'avez pas réellement besoin d'un constructeur pour chaque classe ES6/react. Si aucun constructeur personnalisé n'est défini, il utilisera le constructeur par défaut . Pour les classes de base, c'est:

constructor() {}

Et pour les classes dérivées, le constructeur par défaut est:

constructor(...args) {
  super(...args);
}

Vous devez également appeler super() avant d'accéder à this, car this n'est pas initialisé tant que super() n'est pas appelé.

Il y a quelques raisons d'utiliser un constructeur personnalisé dans react. La première est que vous pouvez définir l'état initial dans le constructeur en utilisant this.state = ... Au lieu d'utiliser la méthode de cycle de vie getInitialState.

Vous pouvez également lier des méthodes de classe à l'intérieur du constructeur avec this.someClassMethod = this.someClassMethod.bind(this). Il est en fait préférable de lier des méthodes dans le constructeur car elles ne seront créées qu'une seule fois. Sinon, si vous appelez bind ou utilisez des fonctions fléchées pour lier des méthodes n'importe où en dehors du constructeur (comme dans la méthode render), cela finira par créer une nouvelle instance de la fonction sur chaque rendu. En savoir plus ici .

Si vous souhaitez utiliser this.props Dans le constructeur, vous devez appeler super avec des accessoires comme argument:

constructor(props) {
  super(props);
  this.state = {count: props.initialCount};
}

Si vous ne le faites pas, alors this.props N'est pas défini dans le constructeur. Cependant, vous pouvez toujours accéder à this.props N'importe où ailleurs dans la classe en dehors du constructeur sans avoir besoin de faire quoi que ce soit avec lui dans le constructeur.

45
Varun Munjeti

Le mot clé super() en javascript est utilisé pour appeler les méthodes de la classe parente. Ceci est souvent utilisé dans une fonction constructeur pour appeler la fonction constructeur parent. Par exemple:

class Animal {
  
  constructor(age) {
    console.log('Animal being made');
    this.age = age;
  }
  
  returnAge() {
    return this.age;
  }
  
}

class Dog extends Animal {

  constructor (age){
    super(age);
  }
  
  logAgeDog () {
    console.log(`This dog is: ${ super.returnAge()} years old`);
  }
  
}

const dog = new Dog(5);


console.log(dog);

dog.logAgeDog();

Dans cet exemple, nous avons une classe Dog qui extends une classe Animal. La classe Dog utilise deux fois le mot clé super. La première occurrence se trouve dans le constructeur, lorsque super() est utilisé dans le constructeur, il appellera le constructeur de la classe parent. Par conséquent, nous devons lui donner la propriété age comme argument. Maintenant, le chien a réussi une propriété d'âge.

Nous pouvons également utiliser super() en dehors du constructeur afin d'accéder aux propriétés et méthodes de la classe (c'est-à-dire prototype) du parent. Nous l'utilisons dans la fonction logAgeDog située dans la classe Dog. Nous utilisons le code suivant:

super.returnAge();

Vous devriez lire ceci comme:

Animal.returnAge();     // superClass.returnAge()

Pourquoi ai-je besoin de cela dans React?

Vous avez besoin du mot clé super() dans React only lors de l'implémentation d'un constructeur. Vous devez faire ce qui suit:

constructor(props) {
  super(props);
  // Don't call this.setState() here!
}

la classe parente nommée Component doit effectuer une initialisation seule pour que React fonctionne correctement. Si vous implémentez un constructeur sans super(props) appeler this.props dans Component sera undefined ce qui peut conduire à des bugs.

10
Willem van der Veen