J'ai des questions sur le constructeur en réaction
regarder par exemple à https://codesandbox.io/s / lpr147kmyle J'ai vérifié le journal de la console et a vu un seul message de journal.
Je pensais que cela devrait être deux messages de journal là-bas, car je crée deux instances de simplesomomponent: ma question est la suivante: quand réagira-t-il Instance de composant et appelez le constructeur du composant? merci,
3 Réponses :
Votre ternaire vérifie l'état pour Si vous supprimez que tous ensemble, et juste P> showfirstComponent code> et ne rendant qu'un. <button onClick={() => this.setState({
showFirstComponent: !this.state.showFirstComponent
})>
Toggle c1/c2
</button>
J'ai mis à jour codesandbox.io/s/lpr147kmyle Il y a un message de journal uniquement. Je ne suis pas sûr de ce qui ne va pas avec cet exemple
Rien, vous les attribuez à des variables une fois et les appelez comme vous en avez besoin. Si vous deviez faire quelque chose comme ceci: Codesandbox.io/s/n9nmp7n7jj invoquerait le constructeur de tous les temps temps. Votre chemin, vous les assignez à des variables une fois, puis en leur montrant comme vous en avez besoin, mais la construction, et même le rendu dans votre cas, n'est appelé qu'une seule fois, lorsque vous faites Soit C1 = ... < / code>.
Vous pouvez également appliquer deux composants distincts à l'aide de la touche .
Selon Le doc , La raison pour laquelle vous ne voyez pas deux instances montage et démonting ici est que les variables Le type principal de réaction est le réactionnement. Il a quatre propriétés: type, accessoires, clé et réf. Il n'a aucune méthode et rien sur le prototype.
réact (virtuel) Terminologie DOM
Seulement lorsque l'élément est rendu, une instance du composant est créée et Alors pourquoi, comme dans votre exemple, l'élément Lorsqu'un composant mette à jour, l'instance reste la même, de sorte que l'état est maintenu entre les rendus.
dans votre exemple, lorsque l'application Voici quelques autres lectures que je trouve utiles pour comprendre ce problème:
https://developmentarc.gitbooks.io/react-idepth/Content/ Life_cycle / naissance_mounting_indepth.html
La réponse de Mark Amery à Cette question est Aussi très utile. constructeur est seulement appelé avant le montage d'un composant. Si vous ajoutez deux autres fonctions de cycle de vie réagissant à votre code de code: composantDidMount et composantwillunmount , vous verrez que le composant n'est monté qu'une fois dans l'ensemble du processus, quel que soit l'époque. l'état change. Si vous ajoutez ensuite Dépompconentupdate sur le composant, vous verrez qu'il n'y a qu'une seule instance de SimpleComponent et la modification de l'état de niveau supérieur est indiquée comme modification des accessoires sur SimpleComponent .
c1 et c2 sont pas instances de Simplecomomonent aussi communément et commodément supposé. Au lieu de cela, ils sont réacteur , qui est un description de l'instance de composant.
constructeur et les fonctions de cycle de vie sont appelées à leurs points de temps respectifs.
c2 ne doit jamais être utilisé pour créer un composant? Cela revient à la manière dont réagir décide quand et quoi mettre à jour à un moment donné (vous pouvez en savoir plus sur celui-ci ici :
Composant rendu c2 au lieu de C1 , réagit voit que le nouvel élément de composant est identique à celui de la L'ancien, il réduit donc le composant (c'est-à-dire qu'une seule instance existe) et met à jour les accessoires / états en conséquence.
J'ai mis à jour l'exemple, ajouté ComponentDidMounttand ComponentWillunMount. Le composantwillunmount n'a pas été appelé. Je pensais que cela réagirait de démonter C1, puis de monter l'instance C2. Mais ce n'est pas le cas. Veuillez consulter l'exemple CODESANDBOX.IO/s/LPR147KMYL
@Trung j'ai mis à jour le poteau et j'espère que vous avez expliqué pourquoi il n'y a pas deux instances ( C1 et c2 ) comme vous pouvez penser. Faites-moi savoir si cela aide.
Si quelqu'un a atterri ici pour code> pour différentes instances créera de nouvelles instances au lieu de réutiliser la même instance. <MyComponent
key={this.state.uniqueInstanceKey}
myData={this.state.myData}/>
En regardant votre exemple, on dirait que c'est lorsque le composant est rendu, par ex. le résultat de l'opérateur ternaire (qui n'est que 1 composant).