Je vois principalement JavaScript utiliser des classes comme constructeur comme suit:
class App extends Component {
render() {
return (
<div className="app-content">
</div>
)
}
}
Quelle est la raison pour laquelle React utilise des classes sans utiliser la fonction contructor () , comme suit ? Je ne vois pas de classes utilisées pour créer des instances.
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
// Getter
get area() {
return this.calcArea();
}
// Method
calcArea() {
return this.height * this.width;
}
}
3 Réponses :
Dans React, l'état est utilisé dans un composant de classe React. Là, vous pouvez définir l'état initial dans le constructeur de la classe, mais aussi y accéder et le mettre à jour avec this.state et this.setState , car vous avez accès à l'instance de classe en utilisant l'objet this .
Si vous utilisez la classe dans le composant React, même sans utiliser constructor () , vous pouvez définir l'état initial comme ci-dessous:
Un autre avantage est que vous pouvez utiliser tous les Méthodes de cycle de vie React
Mise à jour: après React16, vous pouvez utiliser les événements du cycle de vie même dans les composants de fonction en utilisant react hooks
La classe est donc utilisée dans React afin que l'état puisse être consulté et mis à jour?
Nan. Vous pouvez utiliser d'autres fonctionnalités de classe comme this , des méthodes de cycle de vie. Mise à jour de la réponse, veuillez vérifier.
Pour le moment, vous devriez utiliser des classes dans React si vous avez besoin d'utiliser des méthodes de cycle de vie de composant "avancées" comme shouldComponentUpdate () ou autre.
Auparavant, les composants de classe étaient utilisés pour gérer l'état local. En ce moment, nous avons Hooks API qui permet d'utiliser state de manière plus élégante et sans besoin des composants de classe.
Si vous voulez plus de détails, vous pouvez lire l'article de Dan Abramov: En quoi les composants de fonction sont-ils différents des classes? .
Quel que soit votre exemple, vous avez raison, ce code:
function App() {
return <div className="app-content"></div>
}
peut être écrit comme suit:
class App extends Component {
render() {
return (
<div className="app-content">
</div>
)
}
}
J'ai l'impression que la principale raison derrière l'utilisation de class était d'hériter des méthodes, mais cela aurait pu être fait avec require
Quelle est la raison pour laquelle React utilise des classes sans utiliser la fonction
contructor ()
De la classe JavaScript doc :
Si vous ne spécifiez pas de méthode de constructeur, un constructeur par défaut est utilisé.
Donc, un constructeur existe pour chaque classe , qu'une méthode de constructeur soit spécifiée ou non.
Les composantsJe ne vois pas de classes utilisées pour créer des instances.
React implémentés en tant que classes sont instanciés par React dans le cadre du processus de rendu.
Plus précisément, dans la nouvelle React Fiber création une instance d'un composant de classe React se produit sur cette ligne du code source .
Mais oui, @vicondin a raison de dire que le composant simple de la question peut être implémenté en tant que composant de fonction , que les composants de classe étaient le seul moyen de maintenir l'état, d'implémenter des méthodes de cycle de vie, etc., et que le nouveau Hooks permet de ...
utiliser state et d'autres fonctionnalités React sans écrire de classe.
"Donc, un constructeur existe pour chaque classe, qu'une méthode de constructeur soit spécifiée ou non." Intéressant. Je me demande si nous devrons utiliser constructor () alors. Je pense que étend apporte probablement la fonction constructeur?
@Kevvv exactement. Vous n'avez besoin de fournir une fonction constructeur que s'il y a quelque chose de spécifique que vous devez faire dans le constructeur (comme définir l'état initial > bind méthodes, etc.).
Ajoutez des points d'arrêt à React.Component et à cette classe, y compris un constructeur et parcourez ligne par ligne pour vraiment voir ce qui se passe en détail, y compris comment l'extension affecte la compilation et l'exécution. Il se passe beaucoup de choses dans les coulisses pour rendre même ce simple composant. Cela va au-delà de la simple présence d'un constructeur non. Essayez également d'ajouter un constructeur avec l'état initial et voyez les effets.