ReactJS: Quels sont les critères pour ne pas avoir besoin d'un constructeur dans une classe de composant?

Question

Je veux connaître les conditions dans lesquelles un constructeur n'est pas nécessaire dans la déclaration de classe d'un composant. Je pense que c'est pour les composants apatrides, mais y a-t-il d'autres raisons? N'aurait-il pas de fonctions à l'intérieur du composant (en dehors des fonctions de cycle de vie), par exemple?

Answer 1

je pense qu'il serait approprié de laisser juste ici un extrait de react docs (moi qui souligne):

Le constructeur est le bon endroit pour initialiser l'état. Si vous ne initialize état et vous ne lient pas les méthodes, vous ne avez pas besoin de mettre en œuvre un constructeur pour votre React composant.

Answer 2

Habituellement, j'ajoute seulement un constructeur si le composant a un état interne que j'ai besoin de configurer avant de l'utiliser, sinon je laisse de côté le constructeur. Avoir des fonctions dans le composant ne modifie pas ma décision à cet égard

Answer 3

Vous ne fait pas besoin d'un constructeur à tous, en tout cas si vous utilisez le préréglage de scène 2 babel, car il fournit les propriétés de classe qui remplacent efficacement son utilisation:

class Component extends React.Component { 
    constructor() { 
    this.state = {}; 
    this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick() { console.log('click'); } 
} 

devient

class Component extends React.Component { 
    state = {}; 
    handleClick =() => console.log('click'); 
} 

Ignorer cela, un constructeur est nécessaire que si vous avez besoin de lier les méthodes de composants à son contexte, ou si vous avez besoin d'initialiser la propriété state.

Un autre cas est si vous devez faire quelque chose avec la propriété de classe this.props, mais cela est considéré comme un anti-pattern par React.

class Component extends React.Component { 
    constructor() { 
    this.state = { 
     // don't do this! anti-pattern! duplication of source of truth! 
     duplicatedState: this.props.myName, 
    }; 
    } 
}