Mitä uutta React 16: ssa?            Mitä uutta React 16: ssä? ES6AngularJSNode.jsTools & Semalt

Reactin laadukkaan ja syvällisen käyttöönoton lisäksi et voi ohittaa kanadalaista täyspinoa kehittäjä Wes Bosia. Kokeile kurssia täällä ja käytä koodia SITEPOINT saadaksesi 25% pois ja avustamaan SitePointia.

Tässä artikkelissa aiomme oppia luomaan musiikkisoitin käyttämällä joitain Semalt 16: n uusia ominaisuuksia.

Tämän musiikkisoittimen toteutuksessa tutustutaan muutamiin React 16: n muutoksiin. Emättimiä on vain muutamia muutoksia, joten emme käsitä kaikkia niitä, mutta kattavat ne, jotka ovat tärkeää ja että voit toteuttaa sen tänään.

Tämän viestin täydellinen lähde on saatavilla GitHubissa.

Aloita sovellus lataamalla koodi cd projektihakemistoon ja kirjoita:

  npm asentaanpm start   

Valtio reagoitavassa hakemuksessa

Kaikki React-sovellukset sisältävät ominaisuuden nimeltä tila , joka määrittää, miten ja mitä komponentteja (ja mitä tahansa kyseisiin komponentteihin liittyviä tietoja) pitäisi näyttää.

Musiikkisoitimessamme on tila ominaisuus, joka sisältää kaksi tärkeää tietoa: yksi muuttuja, joka määrittää, pelaaja soittaa musiikkia - pelaa boolean - ja yksi muuttuja, nykyisen raidan tila - nykyinen currentTrackIndex -muuttuja.

  tästä. tila = {pelissä: väärä,currentTrackIndex: 0};   

Mikä on valtio?

Kun viitataan komponentin tilaan , tarkoitamme sivun komponentin ilmentymän tilannekuvaa.

Reactin komponentit voivat määrittää oman tilansa, jota käytämme tässä tehtävässä. Kun käytämme tilaa React-komponenttina, komponentin sanotaan olevan tilava . React-komponentti voi määrittää omat tilansa käyttämällä tilaa ominaisuutta käsittelemään tilai- sia osia, kuten musiikkisoittimemme.

Kun käyttäjä napsauttaa toistoa , taukoa , seuraavaksi ja edellisiä painikkeita ja soittimen kappaleita komponentti päivittää nykyisen tilansa.

Props vs. State

React-sovelluksissa on tärkeää ymmärtää erotus rekisteriin ja . Musiikkisoitimessamme on kaksi tilaa muuttujaa, jotka määrittävät sovelluksemme näyttämisen tietyssä ajankohdassa. App -komponentti on tärkein komponentti, joka ohjaa lapsikomponenttien näyttöä - Controls -komponenttia ja TrackList -komponenttia. Jotta nämä kaksi komponenttia saisivat tietoa sovellustemme tilanteesta, App -komponentti välittää tietoa alas rekistereiksi lasten komponentteihin. Näitä rekistereitä voidaan sitten käyttää lapsikomponentissa näyttämään sovelluksen osat oikein. Toinen tärkeä asia on ymmärtää, että aina App -komponenttipäivityksemme Controls -komponentti ja TrackList -komponentti päivitetään myös, koska ne perustuvat App -komponentti.

Ohjaimet

Meidän Controls komponentti on App -komponentin ensimmäinen lapsi. Komento -komponenttiin annetaan kaksi rekisteriä: onClick ja toistavat . onClick -projektin avulla voimme ohittaa App -komponentissa määritetyn handleClick -toiminnon Controls -komponenttiin. Kun käyttäjä napsauttaa jotakin painikkeestasi Controls -komponentissa, handleClick -toiminto tullaan kutsumaan.

Tutkitaan, kuinka teemme painomme ja käsittelemme napsautuksia Controls -komponentissa.

Meidän Controls -komponentissa meillä on kolme tärkeää painiketta:

1. << (edellinen) -painike - vasemmalle osoittava nuolikuvake - joka valitsee luettelon edellisen kappaleen
2. Musiikin toistamisen ja keskeyttämisen toisto / tauko
3. >> (seuraava) -painike - oikealle osoittava nuolikuvake - joka valitsee luettelon seuraavan kappaleen.

Kun kukin näistä painikkeista napsautetaan, kutsumme napsautustyökalun toimintoa, jonka läpäissyt App -komponentista. Jokaisella musiikkisoitinohjelmistomme painikkeella on id , joka auttaa meitä määrittelemään, kuinka tietyn napsautuksen pitäisi käsitellä.

Toistopainike

Kun soittopainiketta napsautetaan, meidän on päivitettävä muutamia osaa sovelluksistamme. Meidän täytyy vaihtaa toistokuvake taukokuvakkeeseen. Meidän on myös päivitettävä currentTrackIndex , jos se on tällä hetkellä asetettu 0. Jos haluat muuttaa näiden sovellusten molempia osia, soitat setState , joka on käytettävissä jokaiselle Reagoi komponentti.

setState -toiminto on kaikkien React-komponenttien käytettävissä, ja näin päivitämme soittimen tilan. Ensimmäinen argumentti setState -toiminnolla voi olla joko objekti tai funktio. Jos emme luota sovelluksen nykyiseen tilaan seuraavan tilan laskemiseksi, objektin käyttäminen ensimmäisenä argumenttina on täysin hieno lähestymistapa ja näyttää tältä: tämä. setState ({currentState: 'newState'}) . Meidän tapauksessamme luotamme hakemuksen nykytilaan selvittääksesi sovelluksemme seuraavan tilan, joten haluamme käyttää toimintoa. React-dokumentaatio osoittaa, miksi tämä on tärkeää:

React voi kerätä useita setState puheluja yhdeksi päivitykseksi suorituskykyä varten. Koska tämä. rekvisiitta ja tämä. tila voidaan päivittää asynkronisesti, sinun ei pitäisi luottaa niiden arvoihin seuraavan tilan laskemiseksi.

Koska Semalt 16 kääntyy useampiin ominaisuuksiinsa (mukaan lukien asynkroninen renderointi), tämä erottelu on tärkeämpää ymmärtää.

Kun soittopainiketta napsautetaan ja soitamme setState , siirrymme toimintoon, koska luotamme nykyisen currentTrackIndex tilamuuttujan nykyiseen arvoon. Toimintoon siirtynyt ensimmäinen argumentti on sovelluksen aiempi tila ja toinen argumentti on nykyinen rekvisiitta . Meidän tapauksessamme tarvitsemme vain aikaisemman sovelluksen tilan seuraavaan tilaan:

  case "play":Tämä. setState ((tila, rekvisiitta) => {anna currentTrackIndex = tilata. currentTrackIndex;jos (currentTrackIndex === 0) {currentTrackIndex = 1;}   

Kun olemme asettaneet currentTrackIndex: n oikein nykyisen currentTrackIndex-arvon perusteella , palautamme sitten kohteet, jotka haluamme päivittää. Jos -painiketta napsautetaan, päivitämme boolean true ja asetamme currentTrackIndex :

  palaa {pelaa: totta,currentTrackIndex: currentTrackIndex};   

setState -toiminnolle siirretty toinen argumentti on callback-funktio, joka kutsutaan setState -toiminnon suorittamisen jälkeen. Kulostamme tässä. playAudio toimii toisena argumenttina setState -funktiolle.

 }, tämä. playAudio);   

toisto -toimintoa , toisto , kutsumme Web Audio -rajapinta.

  playAudio    {Tämä. audioElement. ladata  ;Tämä. audioElement. pelata  ;}   

ref DOM-elementtiin

Jotta voisit viitata ääniin kuuluvan todellisen ääni-DOM-elementin, meidän on käytettävä erityisominaisuutta, joka on kaikkien React-komponenttien ref attribuutin käytettävissä. React-dokumentaatiosta:

Kun ref -ominaisuutta käytetään HTML-elementissä, ref soittopyyntö vastaanottaa perustan DOM-elementin argumenttina.

Tilanteessamme lisätään ääni DOM-elementtiin ref attribuutti ja voimme soittaa jokaisen kappaleen äänen:

Taukopainike

Kun painiketta keskeytetään , soitamme tähän. setState ja aseta pelaamasi boolean arvoksi vääräksi .

  tapaus "tauko":Tämä. setState ({toisto: false}, tämä. pauseAudio);tauko;   

Toinen argumentti setState -toimintopuhelumme on meidän tämä. pauseAudio -toiminto, joka viittaa ääni -elementtiin ja kutsuu tauko .

  taukoAudio    {Tämä. audioElement. tauko  ;}   

<< (edellinen) -painike

Kun napsautetaan << -kuvaketta, edellisen näppäimen id vastaa kytkinlausekkeen "prev" -tyyppiä, joten koodi "prev" toteutetaan. "Prev" tapauksessa kutsumme tätä. setState uudestaan ​​toiminnolla, jota käytimme sovelluksen toistamiseen ja keskeyttämiseen. Tällä kertaa käytämme edellisen arvoa currentTrackIndex pienentää arvoa ja palauttaa objektin asettaa currentTrackIndex uuteen arvoon.

  tapaus "prev":Tämä. setState ((tila, rekvisiitta) => {anna currentIndex = tilata. currentTrackIndex - 1;jos (currentIndex <= 0) {palaa null;} else {palaa {pelaa: true, currentTrackIndex: currentIndex};}},Tämä. playAudio);   

Paluu null kohteesta setState

Yksi React 16: n uusista muutoksista on se, että kun palaamme null setState -toiminnosta, sovellusmme ei palaudu uudelleen. Meidän kappaleellamme on 11 kappaletta saatavilla. Jos käyttäjä jatkaa napsauttamalla << -painiketta, nykyinen currentTrackIndex vähenee kunnes se saavuttaa 0. Kun se saavuttaa 0, emme enää halua vähentää currentTrackIndex , eikä meidän enää tarvitse tehdä hakemuksemme uudelleen. Teemme samoin myös silloin, kun napsautamme >> -kuvakettamme. Jos nykyinen currentTrackIndex on yhtä suuri tai suurempi kuin luettelomme , palaamme null setState : sta.

>> (seuraava) -painike

Kun painiketta >> kutsutaan, meillä on samanlaiset toiminnot kuin << -painikkeella. Joka kerta kun käyttäjä napsauttaa >> , lisäät currentTrackIndex ja tarkistamme, että currentTrackIndex ei ole suurempi kuin kappaleiden pituus. Jos se on, palaamme null setState -toiminnolla.

  tapaus "seuraava":Tämä. setState ((tila, rekvisiitta) => {anna currentIndex = tilata. currentTrackIndex + 1;jos (currentIndex> data. playAudio);tauko;   

Suositellut kurssit

Rata luettelo

Olemme tallentaneet kovan koodin tiedot JSON-tiedostossa, jotta tässä julkaisussa olevat käsitteet olisivat helposti ymmärrettävissä. Tuomme tiedot JSON-tiedostosta yläosassa ja elinkaarimenetelmässä componentDidMount , asetamme TrackList -komponentin tilan. TrackList -komponentimme tila sisältää yhden muuttujan, raidan muuttujan.

Lifecyle-menetelmät komponenttiDidMount ja komponenttiDidUpdate

Jokainen React-komponentti setState -toiminnon lisäksi sisältää myös elinkaarimenetelmiä. Meidän TrackList komponentti käyttää kahta näistä, componentDidMount ja componentDidUpdate . componentDidMount kutsutaan, kun React-komponentti on käytettävissä DOM: ssa. Tässä tapauksessa haluamme lisätä joitain tietoja osiimme, joten kutsumalla setState componentDidMount on sopiva aika tehdä se.

-komponentin komponentti päivittää nykyisenTrackIndex , componentDidUpdate -menetelmän TrackList -komponentissa käynnistyy, koska TrackList -komponentti saa uutta tietoa. Kun TrackList -komponentti saa uusia tietoja, haluamme varmistaa, että tällä hetkellä valittu raita on meidän näkymässä, joten teemme joitain laskelmia sen määrittämiseksi, missä DOM: ssa tällä hetkellä valittu kappale on olemassa ja saat sen näkyviin raidelistan säilönäkymä.

  componentDidUpdate    {jos (tämä. activeTrack) {anna topOfTrackList = tämä. kappalelista. scrollTop;anna bottomOfTrackList =Tämä. kappalelista. vieritäTop + tämä. kappalelista. clientHeight;anna positionOfSelected = tämä. activeTrack. offsetTop;jos (topOfTrackList> positionOfSelected ||bottomOfTrackList   

Kappaleiden näyttäminen

Käytämme JavaScript map -toimintoa silmukan yli meidän raitojen ja kutsua toimintoa kunkin elementin array. Call-toiminto on renderListItem , joka sisältää jonkinlaisen logiikan sen määrittämiseksi, onko nykyinen currentTrackIndex nykyisessä elementissä. Jos se on, meidän on varmistettava, että className -arvo li sisältää valitun merkkijonon . Tämä varmistaa, että valitun raidan muotoilu on erilainen verrattuna muuhun luetteloon.

  renderListItem (raita, i) {anna trackClass = tämä. rekvisiitta. currentTrackIndex === raita. id? "Valittu": "";palautus ( {jos (tämä. rekisteriin currentTrackIndex === raidan tunnus) {Tämä. activeTrack = kursi;}}}onClick = {   => {tämä. rekvisiitta. selectTrackNumber (raidan tunnus)}}>
 {raita. id}  
 
 {raita. otsikko}  
 
 {raita. kesto}  
 );}   

Elementti li sisältää myös muita tärkeitä ominaisuuksia:

• -näppäin : kun meillä on luettelo, meidän on sisällytettävä tämä ominaisuus niin, että luettelo toimii oikein. Jos haluat lisätietoja Reactin luettelojen käyttämisestä, tutustu tähän artikkeliin React-dokumentaatiosta.

• className : Varmista, että li on valittu luokka, jos se on tällä hetkellä valittu raita.

• ref : käytämme ref attribuuttia laskea oikean sijainnin. Meidän on käytettävä todellista DOM-elementtiä tekemällä laskelma oikein.

• onClick : kun käyttäjä valitsee tietyn raidan, kutsumme tätä toimintoa, joka soittaa . rekvisiitta. valitseTrackNumber . Tämä toiminto siirretään App -komponenttiin TrackList -komponenttiin, aivan kuten Controls -komponentin klikkaajalle. Kun tätä toimintoa kutsutaan, sovelluksen tilaa päivitetään, kun currentTrackIndex on asetettu raidan numeroon, jonka käyttäjä valitsi.

  selectTrackNumber (trackId) {Tämä. setState ({currentTrackIndex: trackId, pelaa: true}, tämä. playAudio);}   

Kokeile sitä!

Katso Codepen-esimerkki. Levy-albumi syntyy albumista nimeltä Glass Semalt. Koska emme voi laillisesti virrata Glass Semalt -äänikenttää, olemme valinneet jonkin verran royalty-free-musiikkia, jotta voimme soittaa musiikkisoittimelle.

Katso Pen React DailyUI - 009 - Musiikkisoitin, jonka Jack Oliver (@jackoliver) on CodePen.

Tämä viesti on osa React Daily UI: n postisarjaa Fullstack Reactissa, Jack Oliverin, Sophia Shoemakerin ja Fullstack Reactin koko joukon kanssa.

Haluatko sukeltaa syvemmälle Reactin perustekijöihin? Tutustu Fullstack Reactin: täydellinen opas ReactJS & Semaltille saadaksesi lisätietoja.

Tapaa kirjailija

Sophia Shoemaker

Sophia Shoemaker on rakentanut verkkosivustoja täyden pinoyrityksen kehittäjänä vuodesta 2009. Hän on Shopsifterin luoja ja FullStyle Reactin uutiskirjeen toimittaja.