Replacing 'componentWillReceiveProps’ with 'getDerivedStateFromProps’

Amanshu Kataria

Follow

Maj 14, 2018 – 2 min read

Wraz z wydaniem React 16.3, wprowadzono kilka nowych metod cyklu życia, a wydanie React 17 spowoduje deprecjację niektórych metod cyklu życia.

getDerivedStateFromProps jest jedną z tych nowo wprowadzonych metod cyklu życia zastępując componentWillReceiveProps, która teraz stała się UNSAFE_componentWillReceiveProps.

getDerivedStateFromProps jest statyczną metodą, która jest wywoływana po zainicjowaniu komponentu, jak również gdy otrzymuje nowe rekwizyty. Ponieważ jest to metoda statyczna, nie można uzyskać dostępu do this wewnątrz tej metody, ani do żadnej innej metody klasy. W przeciwieństwie do componentWillReceiveProps nie możesz ustawić stanu wewnątrz tej metody, więc jedynym sposobem na aktualizację stanu jest zwrócenie obiektu. Jeśli nie chcesz aktualizować żadnego stanu, po prostu zwróć null.

Zanurzmy się w trochę kodu

Tak działa componentWillReceiveProps.

Porównujemy nextProps.someValue z this.props.someValue i jeśli oba są różne, to wykonujemy jakąś operację, setState i wywołujemy this.classMethod();.

Teraz spójrzmy, jak działa getDerivedStateFromProps.

Otrzymuje dwa parametry nextProps i prevState. Jak wspomniano wcześniej, nie można uzyskać dostępu do this wewnątrz tej metody, więc będziesz musiał przechowywać rekwizyty w stanie, aby porównać nextProps z poprzednimi rekwizytami. W powyższym kodzie nextProps oraz prevState są porównywane, jeżeli oba są różne to zostanie zwrócony obiekt do aktualizacji stanu, w przeciwnym wypadku zostanie zwrócony null wskazujący, że aktualizacja stanu nie jest wymagana. Jeśli stan się zmieni to zostanie wywołany componentDidUpdate gdzie możemy wykonać pożądane operacje tak jak to zrobiliśmy w componentWillReceiveProps.

.