För att ersätta ’componentWillReceiveProps’ med ’getDerivedStateFromProps’

Amanshu Kataria

Follow

14 maj, 2018 – 2 min read

Med lanseringen av React 16.3 har några nya livscykelmetoder införts, och med React 17 kommer vissa livscykelmetoder att avvecklas.

getDerivedStateFromProps är en av de nyinförda livscykelmetoderna som ersätter componentWillReceiveProps, som nu har blivit UNSAFE_componentWillReceiveProps.

getDerivedStateFromProps är en statisk metod som åberopas efter att en komponent har instansierats samt när den tar emot ny rekvisita. Eftersom det är en statisk metod kan du inte komma åt this inuti denna metod och inte heller kan du komma åt någon annan klassmetod. Till skillnad från componentWillReceiveProps kan du inte ställa in status inuti den här metoden, så det enda sättet att uppdatera status är att returnera ett objekt. Om du inte vill uppdatera något tillstånd är det bara att returnera null.

Låt oss dyka ner i lite kod

Detta är hur componentWillReceiveProps fungerar.

Vi jämför nextProps.someValue med this.props.someValue och om båda är olika utför vi någon operation, setState och anropar this.classMethod();.

Nu ska vi ta en titt på hur getDerivedStateFromProps fungerar.

Den tar emot två parametrar nextProps och prevState. Som tidigare nämnts kan du inte komma åt this inuti den här metoden, så du måste lagra rekvisitan i tillståndet för att jämföra nextProps med tidigare rekvisita. I ovanstående kod jämförs nextProps och prevState, om båda är olika returneras ett objekt för att uppdatera tillståndet, annars returneras null som anger att en uppdatering av tillståndet inte behövs. Om tillståndet ändras anropas componentDidUpdate där vi kan utföra önskade operationer som vi gjorde i componentWillReceiveProps.

.