Remplacement de ‘componentWillReceiveProps’ par ‘getDerivedStateFromProps’
Avec la sortie de React 16.3, certaines nouvelles méthodes de cycle de vie ont été introduites, et la sortie de React 17 dépréciera certaines méthodes de cycle de vie.
getDerivedStateFromProps est l’une de ces méthodes de cycle de vie nouvellement introduites remplaçant componentWillReceiveProps, qui est maintenant devenu UNSAFE_componentWillReceiveProps.
getDerivedStateFromProps est une méthode statique qui est invoquée après l’instanciation d’un composant ainsi que lorsqu’il reçoit de nouveaux props. Puisque c’est une méthode statique, vous ne pouvez pas accéder à this à l’intérieur de cette méthode ni à aucune autre méthode de classe. Contrairement à componentWillReceiveProps, vous ne pouvez pas définir l’état à l’intérieur de cette méthode, donc la seule façon de mettre à jour l’état est de retourner un objet. Si vous ne voulez pas mettre à jour un état, il suffit de retourner null.
Plongeons un peu de code
Voici comment fonctionne componentWillReceiveProps.
Nous comparons nextProps.someValue avec this.props.someValue et si les deux sont différents alors nous effectuons une opération, setState et appelons this.classMethod();.
Maintenant regardons comment getDerivedStateFromProps fonctionne.
Il reçoit deux paramètres nextProps et prevState. Comme mentionné précédemment, vous ne pouvez pas accéder à this à l’intérieur de cette méthode, donc vous devrez stocker les props dans l’état pour comparer le nextProps avec les props précédents. Dans le code ci-dessus nextProps et prevState sont comparés, si les deux sont différents alors un objet sera retourné pour mettre à jour l’état sinon null sera retourné indiquant que la mise à jour de l’état n’est pas nécessaire. Si l’état change alors componentDidUpdate est appelé où nous pouvons effectuer les opérations souhaitées comme nous l’avons fait dans componentWillReceiveProps.
.
Leave a Reply