Vervang ‘componentWillReceiveProps’ door ‘getDerivedStateFromProps’

Amanshu Kataria

Volg

14 mei, 2018 – 2 min read

Met de release van React 16.3 zijn enkele nieuwe levenscyclusmethoden geïntroduceerd, en met de release van React 17 worden enkele levenscyclusmethoden afgeschaft.

getDerivedStateFromProps is een van die nieuw geïntroduceerde levenscyclusmethoden en vervangt componentWillReceiveProps, dat nu UNSAFE_componentWillReceiveProps is geworden.

getDerivedStateFromProps is een statische methode die wordt aangeroepen nadat een component is geïnstantieerd en wanneer deze nieuwe props ontvangt. Omdat het een statische methode is, hebt u geen toegang tot this binnen deze methode en ook niet tot een andere methode van de klasse. In tegenstelling tot componentWillReceiveProps kun je state niet instellen in deze methode, dus de enige manier om state te updaten is het retourneren van een object. Als u geen status wilt bijwerken, stuurt u gewoon null terug.

Laten we eens in wat code duiken

Dit is hoe componentWillReceiveProps werkt.

We vergelijken nextProps.someValue met this.props.someValue en als beide verschillend zijn, voeren we een bewerking uit, setState en roepen this.classMethod(); op.

Nu eens kijken hoe getDerivedStateFromProps werkt.

Het ontvangt twee params nextProps en prevState. Zoals eerder vermeld kun je this niet benaderen in deze methode, dus moet je de props opslaan in de status om de nextProps te vergelijken met eerdere props. In bovenstaande code worden nextProps en prevState vergeleken, indien beide verschillend zijn dan zal een object worden teruggegeven om de toestand te updaten anders zal null worden teruggegeven om aan te geven dat state update niet nodig is. Als de status verandert dan wordt componentDidUpdate aangeroepen waar we de gewenste operaties kunnen uitvoeren zoals we deden in componentWillReceiveProps.