Ensinnäkin puhutaan komponenttiDidCatchistä, joka on erittäin merkittävä elinkaarimenetelmä Reactissa. Tämä menetelmä toimii JavaScript-virheen rajana. Jos komponentissa tapahtuu virhe, komponenttiDidCatch-menetelmä havaitsee virheen ja näyttää varakäyttöliittymän koko sovelluksen kaatumisen sijaan. Se on osa "Error Boundaries" -konseptia React 16:ssa ja uudemmissa.
Tätä elinkaarimenetelmää voidaan käyttää eri tavoin. Keydown-tapahtumien käsittely React-komponenteissa on kuitenkin yleinen vaatimus, ja yksi sovelletuista strategioista on toteuttaa onKeyDown-tapahtuma. Sukellaan suoraan ratkaisuun.
class (YourComponent) extends React.Component {
onKeyDown(event) {
switch (event.keyCode) {
case 27:
// logic here
break;
default:
break;
}
}
componentWillMount() {
document.addEventListener('keydown', this.onKeyDown.bind(this));
}
componentWillUnmount() {
document.removeEventListener('keydown', this.onKeyDown.bind(this));
}
}
Käydään nyt läpi koodin vaiheittainen selitys.
Tapahtumankäsittely Reactissa
React tarjoaa synteettisiä tapahtumia, jotka käärivät selaimen alkuperäisten tapahtumien ympärille varmistaakseen, että tapahtumilla on yhdenmukaiset ominaisuudet eri selaimissa. OnKeyDown-toiminto on tapahtumakäsittelijä, jota kutsutaan, kun käyttäjä painaa näppäintä.
Komponenttien elinkaarimenetelmät
Kun komponentti renderöidään DOM:iin, se käy läpi useita elinkaaren vaiheita – asennus, päivitys ja irrotus. Se antaa mahdollisuuden kapseloida React-komponentteja tietyistä käyttäytymisensä näkökohdista. Lisäämme tapahtumien kuuntelijan komponenttiWillMountiin ja poistamme sen komponenttiWillUnmountista muistivuotojen estämiseksi.
On myös tärkeää ottaa huomioon muut osat ja kirjastot, jotka liittyvät tapahtumien käsittelyyn Reactissa. Monet kirjastot tarjoavat lisäominaisuuksia ja suorittavat tehtäviä, kuten asynkronoitujen tapahtumien käsittelyn tai kaasu- ja palautustapahtumien käsittelijöiden.
Reactilla on rikas kirjastoekosysteemi jotka voivat helpottaa kehitysprosessiasi. Esimerkiksi "react-use" on suosittu kirjasto, joka tarjoaa useita mukautettuja koukkuja, mukaan lukien "useKey". "useKey" on koukku, jota voidaan käyttää vastaamaan näppäinpainalluksiin. Tämä tekee siitä hyödyllisen työkalun interaktiivisten React-sovellusten kehittämisessä.
Lisäksi on huomioitava suorituskykyyn liittyviä näkökohtia. Jos esimerkiksi lisäät ja poistat tapahtumaseuraajia usein yhden sivun sovelluksessa, se voi vaikuttaa suorituskykyyn. Siksi on tärkeää harkita tapahtumakuuntelijoiden lisäämisen ja poistamisen strategiaa.
Näppäimistötapahtumien käsittely
Näppäimistötapahtumat ovat välttämättömiä sujuvan käyttökokemuksen tarjoamiseksi. React tarjoaa onKeyDown-, onKeyPress- ja onKeyUp-menetelmiä näiden tapahtumien käsittelemiseksi. Vaatimuksestasi riippuen saatat joutua tallentamaan vain näppäimen painalluksen ('onKeyDown' tai 'onKeyPress') tai näppäimen vapautustapahtuman ('onKeyUp').
