J'ai récemment vu ce type de schéma de réact où l'état est défini dans un rendu en utilisant Ceci semble être un anti-motif. Cela peut-il causer des bugs? Il semble fonctionner correctement. Je voudrais simplement utiliser un cycle de vie de composant pour définir l'état: Quelle est la manière recommandée? ceci.state :
3 Réponses :
de la réaction Documents:
La fonction Render () doit être pure, ce qui signifie qu'il ne modifie pas l'état du composant, il renvoie le même résultat à chaque appel, et il n'interagit pas directement avec le navigateur. Si vous devez interagir avec le navigateur, effectuez votre travail en composantDidMount () ou sur les autres méthodes de cycle de vie. Garder le rendu () pur rend les composants plus faciles à penser.
rendu doit toujours être pur sans aucun effet secondaire , donc c'est certainement une mauvaise pratique.
C'est un état de réglage incorrect dans la méthode de rendu. Vous pouvez définir l'état dans la méthode de LifeCyles. Mais autre chose est que votre composant puisse recevoir les mêmes accessoires à plusieurs reprises, votre composant sera donc défini de plusieurs reprises et de rendu. Pour résoudre ce problème, vous devez comparer votre nouveau avec vos accessoires actuels, par exemple, comparer les objets JSON:
componentWillReceiveProps(nextProps) {
if(JSON.stringify(this.props) !== JSON.stringify(nextProps) && nextProps.show) {
if(!this.state.showButton) {
this.setState({
showButton: true,
})
}
}
}
C'est un anti-motif. Si l'état de Showbutton n'est pas toujours égal à montrer des accessoires (ce qui est le cas dans l'exemple), j'utiliserais ceci: modifier: comme de réagit 16.3 Il faut utiliser GetDeriveStateStape < / fort> dans ce cas. Notez que composantwillreceiveProps sera obsolète. de la DOCS: GetDeriveDeStateFromProps est invoqué après que un composant est instancié, ainsi que lorsqu'il reçoit de nouveau accessoires. Il devrait renvoyer un objet à mettre à jour l'état ou null pour indiquer que les nouveaux accessoires ne nécessitent aucune mises à jour de l'état. https://reactjs.org/docs/react-component.html#static-gederavedStateFromProps
Y a-t-il une raison pour laquelle vous préférez composantDidUpdate sur composantwillreceiveProps ?
J'ai mis à jour ma réponse, ils décèveront la compositionWillreceiveProps et introduits GetDeriveStateFromProps pour le moment où les appels apportent des modifications de l'état de déclenchement. Sauf que, le composantwillreceiveProps semblerait plus naturel sur le composantDidupdate pour qu'il vérifie les accessoires alors que la suite vérifie les appels et les changements d'État. Mais j'ai initialement répondu avec ComponentDidUpdate car je pensais que vous souhaitez d'abord que vos accessoires soient mis à jour, puis mettez à jour votre état.
Comme les autres réponses mentionnent, l'état de réglage à l'intérieur
rendu est un anti-motif et pourrait finir par causer des boucles infinies. De plus, régler l'état directement (par exemple,this.state.foo = 'bar' ) au lieu d'utiliserthis.setstate ({foo: 'bar'}) peut avoir involonté ou conséquences inattendues. Utilisation de la méthode de cycle de vieComposantwillreceiveProps Comme si vous avez fait, il y a un bon meilleur modèle.