Osana Reactin asynkronisen renderöinnin toteutusta Reactissa on muutamia elinkaarimetodeja, joiden käytöstä luovutaan React 17:ssä (ks. React Blog). Yleisesti käytetty niistä on componentWillReceiveProps. Useimmissa tapauksissa sitä käytetään käsittelemään
komponentin
propsin muutosta.

Mitä siis tehdä?

Yksi ratkaisu on käyttää static getDerivedStateFromProps-metodia. Siitä on loistava ’HowTo’ dev.to Post Larry Pricelta.

Toinen ratkaisu on käyttää React Hooksia, erityisesti useEffect() Hookia. Tämä voi olla mukava ratkaisu, jos sinulla on pieni komponentti ja haluat vaihtaa toiminnalliseen komponenttiin tämän muutoksen sisällä.

Tässä on yksinkertainen esimerkki. Kuvitellaan, että renderöimme taulukkokomponentin, jossa on lista kohteita. Kaikkien kohteiden on aluksi käytävä doSomething()-metodin läpi.

edellinen koodi

doSomething (items) { // some code to sort items ... return items}state = { items: this.props.items}componentWillReceiveProps (nextProps) { this.setState({ items: doSomething(nextProps.items) })}

Koukkujen avulla

const doSomething = (items) => { // some code to sort items ... return items}const = useState(doSomething(props.items))useEffect(() => { setItems(defaultSorting(items))}, )

Voimme käyttää useEffect()Koukkua, joka oletusarvoisesti ajetaan jokaisessa renderöinnissä. Välttääksemme tarpeettomia kutsuja käytämme toisena parametrina . Näin useEffect() suoritetaan vain silloin, kun ominaisuus items on muuttunut.

Tärkeä huomautus

Ennen kuin vaihdat getDerivedStateFromProps():n tai useEffect():n kannattaa tarkistaa, tarvitsetko todella tätä ominaisuuden käsittelyä. Tutustu tähän viralliseen React-blogipostaukseen yleisimmistä bugeista ja anti-patternista.

Joskus kirjoitamme joitain ominaisuuksia tilaan, vaikka meidän ei tarvitsisi. Jos sinun täytyy esimerkiksi lajitella lista, joka tulee ominaisuudesta, tee se renderöinnin aikana ja vältä sen kirjoittamista komponentin tilaan.