Replacing ’componentWillReceiveProps’ with ’getDerivedStateFromProps’

Amanshu Kataria

Seuraa

14. toukokuuta, 2018 – 2 min read

Vapauttamalla React 16.3 on otettu käyttöön joitakin uusia elinkaarimetodeja, ja React 17:n julkaisun myötä osa elinkaarimetodeista poistuu käytöstä.

getDerivedStateFromProps on yksi näistä uusista käyttöönotetuista elinkaarimetodeista, joka korvaa componentWillReceiveProps:n, joka on nyt muuttunut UNSAFE_componentWillReceiveProps:ksi.

getDerivedStateFromProps on staattinen metodi, joka kutsutaan sen jälkeen, kun komponentti on instanttisoitu, sekä silloin, kun komponentti vastaanottaa uusia rekvisiittaa. Koska kyseessä on staattinen metodi, et voi käyttää this:tä tämän metodin sisällä etkä myöskään mitään muuta luokan metodia. Toisin kuin componentWillReceiveProps, tämän metodin sisällä ei voi asettaa tilaa, joten ainoa tapa päivittää tila on palauttaa objekti. Jos et halua päivittää mitään tilaa, yksinkertaisesti palauta null.

Sukelletaanpa hieman koodiin

Näin componentWillReceiveProps toimii.

Vertaamme nextProps.someValue ja this.props.someValue ja jos molemmat ovat erilaiset, suoritamme jonkin operaation, setState ja kutsumme this.classMethod();.

Katsotaan nyt, miten getDerivedStateFromProps toimii.

Se vastaanottaa kaksi parametria nextProps ja prevState. Kuten aiemmin mainittiin, et voi käyttää this tämän metodin sisällä, joten sinun on tallennettava propsit tilaan, jotta voit verrata nextProps:aa aiempiin propsseihin. Yllä olevassa koodissa verrataan nextProps ja prevState, jos molemmat ovat erilaisia, palautetaan objekti tilan päivittämistä varten, muuten palautetaan null, joka osoittaa, että tilan päivitystä ei tarvita. Jos tila muuttuu, kutsutaan componentDidUpdate, jossa voimme suorittaa halutut operaatiot kuten teimme kohdassa componentWillReceiveProps.

.