Ombytning af ‘componentWillReceiveProps’ med ‘getDerivedStateFromProps’

Amanshu Kataria

Follow

14. maj, 2018 – 2 min read

Med udgivelsen af React 16.3 er der blevet indført nogle nye livscyklusmetoder, og udgivelsen af React 17 vil deprecate nogle livscyklusmetoder.

getDerivedStateFromProps er en af de nyligt indførte livscyklusmetoder, der erstatter componentWillReceiveProps, som nu er blevet til UNSAFE_componentWillReceiveProps.

getDerivedStateFromProps er en statisk metode, der påkaldes, efter at en komponent er instantieret, samt når den modtager nye rekvisitter. Da det er en statisk metode, kan du ikke få adgang til this inde i denne metode, og du kan heller ikke få adgang til nogen anden metode i klassen. I modsætning til componentWillReceiveProps kan du ikke indstille tilstand inde i denne metode, så den eneste måde at opdatere tilstand på er at returnere et objekt. Hvis du ikke ønsker at opdatere nogen tilstand, skal du blot returnere null.

Lad os dykke ned i noget kode

Det er sådan her, componentWillReceiveProps fungerer.

Vi sammenligner nextProps.someValue med this.props.someValue, og hvis begge er forskellige, udfører vi en operation, setState og kalder this.classMethod();.

Nu skal vi se på, hvordan getDerivedStateFromProps fungerer.

Den modtager to params nextProps og prevState. Som tidligere nævnt kan du ikke få adgang til this inde i denne metode, så du bliver nødt til at gemme propsene i tilstanden for at sammenligne nextProps med tidligere props. I ovenstående kode sammenlignes nextProps og prevState, og hvis begge er forskellige, returneres et objekt for at opdatere tilstanden, ellers returneres null, der angiver, at der ikke kræves en opdatering af tilstanden. Hvis tilstanden ændres, kaldes componentDidUpdate, hvor vi kan udføre de ønskede operationer, som vi gjorde i componentWillReceiveProps.