Záměna ‚componentWillReceiveProps‘ za ‚getDerivedStateFromProps‘

Amanshu Kataria

Follow

14. května, 2018 – 2 minuty čtení

S vydáním React 16.3 byly zavedeny některé nové metody životního cyklu a při vydání Reactu 17 budou některé metody životního cyklu zrušeny.

getDerivedStateFromProps je jednou z těchto nově zavedených metod životního cyklu, která nahradila metodu componentWillReceiveProps, z níž se nyní stala metoda UNSAFE_componentWillReceiveProps.

getDerivedStateFromProps je statická metoda, která je vyvolána po instanciaci komponenty a také při přijetí nových rekvizit. Protože se jedná o statickou metodu, nemůžete uvnitř této metody přistupovat k this ani k žádné jiné metodě třídy. Na rozdíl od componentWillReceiveProps nemůžete uvnitř této metody nastavovat stav, takže jediným způsobem aktualizace stavu je vrácení objektu. Pokud nechcete žádný stav aktualizovat, jednoduše vraťte null.

Ponořme se do kódu

Takto funguje componentWillReceiveProps.

Porovnáme nextProps.someValue s this.props.someValue a pokud se obě liší, provedeme nějakou operaci, setState a zavoláme this.classMethod();.

Nyní se podíváme, jak funguje getDerivedStateFromProps.

Přijme dva parametry nextProps a prevState. Jak již bylo zmíněno, uvnitř této metody nemůžete přistupovat k this, takže budete muset rekvizity uložit do stavu, abyste mohli porovnat nextProps s předchozími rekvizitami. Ve výše uvedeném kódu se porovnávají nextProps a prevState, pokud se obě liší, pak se vrátí objekt pro aktualizaci stavu, jinak se vrátí null, což znamená, že aktualizace stavu není nutná. Pokud se stav změní, pak se zavolá componentDidUpdate, kde můžeme provést požadované operace jako v componentWillReceiveProps.

.