Sostituzione di ‘componentWillReceiveProps’ con ‘getDerivedStateFromProps’

Amanshu Kataria
Amanshu Kataria

Follow

14 maggio, 2018 – 2 min read

Con il rilascio di React 16.3, sono stati introdotti alcuni nuovi metodi del ciclo di vita, e il rilascio di React 17 deprecherà alcuni metodi del ciclo di vita.

getDerivedStateFromProps è uno di quei nuovi metodi del ciclo di vita introdotti che sostituisce componentWillReceiveProps, che ora è diventato UNSAFE_componentWillReceiveProps.

getDerivedStateFromProps è un metodo statico che viene invocato dopo che un componente viene istanziato così come quando riceve nuovi oggetti di scena. Poiché è un metodo statico, non potete accedere a this all’interno di questo metodo né potete accedere a qualsiasi altro metodo di classe. A differenza di componentWillReceiveProps non potete impostare lo stato all’interno di questo metodo, quindi l’unico modo per aggiornare lo stato è restituire un oggetto. Se non volete aggiornare nessuno stato, restituite semplicemente null.

Tuffiamoci in un po’ di codice

Ecco come funziona componentWillReceiveProps.

Confrontiamo nextProps.someValue con this.props.someValue e se entrambi sono diversi allora eseguiamo qualche operazione, setState e chiamiamo this.classMethod();.

Ora diamo uno sguardo a come funziona getDerivedStateFromProps.

Riceve due parametri nextProps e prevState. Come menzionato in precedenza, non è possibile accedere a this all’interno di questo metodo, quindi dovrete memorizzare gli oggetti di scena nello stato per confrontare il nextProps con gli oggetti di scena precedenti. Nel codice sopra nextProps e prevState vengono confrontati, se entrambi sono diversi allora verrà restituito un oggetto per aggiornare lo stato altrimenti null verrà restituito indicando che l’aggiornamento dello stato non è richiesto. Se lo stato cambia allora componentDidUpdate viene chiamato dove possiamo eseguire le operazioni desiderate come abbiamo fatto in componentWillReceiveProps.

Leave a Reply