React

Harjoitellaan Reactin funktiopohjaisia komponentteja. Näistä tehtävistä löytyy myös vanhempi luokkapohjainen versio, mutta funktiopohjainen toteutus on helpompi ja yksinkertaisempi. Uusimmat React-sovellukset käyttävät funktiopohjaisia komponentteja.

Ennen näiden tehtävien tekemistä,katso seuraavat luennot. Huom. näissä luentomateriaaleissa käytetään vanhempaa luokkapohjaista syntaksia, mutta reactin toimintaperiaate on kuitenkin edelleen sama.

Avaa Reactin Quick Start -tutoriaali Käytä tutoriaalia apunasi seuraavissa tehtävissä.

Huom. monissa react-ohjeissa neuvotaan asentamaan node ym. työkaluja. Mitään näitä ei tarvitse tällä kurssilla asentaa vaan pääset alkuun yksinkertaisemmin tämän sivun ohjeiden avulla.

memo

Oletuksena React renderoi komponentin uudelleen aina, kun komponentin vanhempi komponentti renderoituu uudelleen. Toimintaa voi tehostaa, jos renderointi tehdään uudelleen, vain komponentin propsien muuttuessa. Luokkapohjaisissa react-komponenteissa perittäisiin PureComponent-luokasta. Funktiopohjaisissa komponenteissa voidaan hyödyntää memoa. PureComponent ja memolla toteutettu memoized-versio funktiosta sisältävät pintapuolisen (shallow) vertailun komponenttien propsien muuttumisesta.

Tee List- ja FilteredList-komponenteista memoization-versiot seuraavaan tapaan:

const FilteredList = React.memo(function(props) {
...
});

Vieläkö sovelluksesi toimii? Jos toimii, niin hienoa :-) Mahdollisesti olet suoraan mutatoinut komponenttiesi tilaa. Olet muistanut päivittää myös tilaa, mutta ehkä et ole tehnyt muutoksia tilan kopioon vaan suoraan tilassa olevaan taulukkoon tai objekteihin. Kts. How to accidentally mutate state. And why not to.

Miksi laskurikomponentista ei kannata tehdä memoization-versiota? Mitä jos kuitenkin teet? Toimiiko komponentti edelleen? Miksi? Kts. Minimizing props changes .

Toimiiko automerkkien poistaminen? Jos toteutit poistamisen filter-metodilla niin tämä pitäisi toimia, koska filter luo aina uuden taulukon. Tämä taulukko on kuitenkin sisällön puolesta vain pinnallinen (shallow) kopio alkuperäisestä tilasta. Tässä ohjelmassa tuo riittää, mutta ei välttämättä aina. Mahdollisen deep copyn tarve täytyy aina miettiä tapauskohtaisesti.

Korjaa sovelluksesi mahdolliset bugit, että se toimii myös memoization-optimoinnin kera.

Lisätietoa: Use React.memo() wisely, Before You memo() ja When should you memoize in React

Lisäoptimointia voi yrittää tehdä useMemo ja useCallback avulla.

Mallivastaus, mallin react-koodi

Lomakkeet

malliratkaisu 2022 toteutettuna function-komponenteilla. React-lähdekoodi.

React, Fetch ja useEffect

Kts. esimerkki, jos haluat käyttää Fetchiä React-komponentin tilan alustamisessa ja päivittämisessä. Lähdekoodi.

Refs ja DOM-objektit

Esimerkki refsin käytöstä

Vanhat esimerkit

malliratkaisu 2020 toteutettuna class-komponenteilla

Vanhemmat esimerkit ja vanhemmalla syntaksilla: Malliesimerkki ja Toinen malli

Lisätietoa

Käyttäjien kommentit

Kommentoi Lisää kommentti
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta