Il semble componentWillReceiveProps
qu'il sera complètement éliminé dans les prochaines versions, au profit d'une nouvelle méthode de cycle de vie getDerivedStateFromProps
: static getDerivedStateFromProps () .
Après inspection, il semble que vous ne puissiez plus faire une comparaison directe entre this.props
et nextProps
, comme vous pouvez le faire componentWillReceiveProps
. Y a-t-il un moyen de contourner cela?
En outre, il renvoie maintenant un objet. Ai-je raison de supposer que la valeur de retour est essentiellement this.setState
?
Voici un exemple que j'ai trouvé en ligne: État dérivé des accessoires / état .
Avant
class ExampleComponent extends React.Component {
state = {
derivedData: computeDerivedState(this.props)
};
componentWillReceiveProps(nextProps) {
if (this.props.someValue !== nextProps.someValue) {
this.setState({
derivedData: computeDerivedState(nextProps)
});
}
}
}
Après
class ExampleComponent extends React.Component {
// Initialize state in constructor,
// Or with a property initializer.
state = {};
static getDerivedStateFromProps(nextProps, prevState) {
if (prevState.someMirroredValue !== nextProps.someValue) {
return {
derivedData: computeDerivedState(nextProps),
someMirroredValue: nextProps.someValue
};
}
// Return null to indicate no change to state.
return null;
}
}
la source
componentWillReceiveProps
getDerivedStateFromProps
n'a jamais été vraiment destiné à la mémorisation . Veuillez voir ma réponse ci-dessous où j'ai plutôt décrit l'approche recommandée ....
? C'est-à-dire que nous devons renvoyer l'objet d'état entier ou seulement la partie qui nous intéresse.Comme nous l' avons récemment sur le blog de React , dans la grande majorité des cas , vous n'avez pas besoin
getDerivedStateFromProps
du tout .Si vous souhaitez simplement calculer des données dérivées, soit:
render
memoize-one
.Voici l'exemple "après" le plus simple:
Consultez cette section du billet de blog pour en savoir plus.
la source
componentWillReceiveProps
était simple et cela a fonctionné. Pourquoi le supprimer pour cette poubelle statique ...Tel que mentionné par Dan Abramov
Nous utilisons en fait cette approche avec memoise one pour tout type d'accessoires de proxy pour les calculs d'état.
Notre code ressemble à ceci
Les avantages de celui-ci sont que vous n'avez pas besoin de coder des tonnes de passe-partout de comparaison à l'intérieur
getDerivedStateFromProps
oucomponentWillReceiveProps
et que vous pouvez ignorer l'initialisation par copier-coller dans un constructeur.REMARQUE:
Cette approche est utilisée uniquement pour transmettre par proxy les accessoires à l'état, au cas où vous auriez une logique d'état interne, elle doit encore être gérée dans les cycles de vie des composants.
la source