web-dev-qa-db-fra.com

Quand est-il approprié d'utiliser un constructeur dans REACT?

Je comprends le concept de constructeurs en OOP langages comme C++. Cependant, je ne sais pas vraiment quand utiliser un constructeur dans REACT. Je comprends que JavaScript est orienté objet, mais je ne suis pas sûr ce que le constructeur "construit" réellement.

Lors du rendu d'un composant enfant, avez-vous besoin d'un constructeur dans le composant enfant? Par exemple:

class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         items: [],
         error: null
      }
    }
    render () {
       return (
          <React.Fragment>
             <ChildComponent data={this.state.items}></ChildComponent>
          </React.Fragment>
       )
    }
}

Je vais garder l'exemple court par souci de concision. Mais, pourquoi auriez-vous besoin d'un constructeur? Et auriez-vous besoin d'un constructeur dans le composant enfant pour les accessoires?

Il est possible que mes connaissances ES6 ne soient pas à la hauteur.

7
WebDream

Si vous n'initialisez pas d'état et que vous ne liez pas de méthodes, vous n'avez pas besoin d'implémenter un constructeur pour votre composant React.

Le constructeur d'un composant React est appelé avant son montage. Lors de l'implémentation du constructeur d'une sous-classe React.Component, vous devez appeler super (props) avant toute autre instruction. Sinon, this.props ne sera pas défini dans le constructeur, ce qui peut entraîner des bugs.

En général, dans React les constructeurs ne sont utilisés que pour deux raisons:

  • Initialisation de l'état local en affectant un objet à this.state.
  • Liaison de méthodes de gestionnaire d'événements à une instance.

https://reactjs.org/docs/react-component.html#constructor

1
null

Linke dans votre exemple, il est utile d'utiliser le constructeur lorsque vous avez besoin d'initialiser votre état ou de lier une fonction d'événement-écouteur

  1. <element onClick={this.handler} />
  2. this.handler = this.bind.handler(this); à l'intérieur du constructeur
0
Aldo Maria Landini