Kõigepealt räägime komponentDidCatchist, mis on Reactis väga oluline elutsükli meetod. See meetod töötab JavaScripti veapiirina. Kui mõnes komponendis ilmneb tõrge, tabab komponentDidCatch meetod vea ja kuvab kogu rakenduse kokkujooksmise asemel varu kasutajaliidese. See on osa React 16 ja uuemate versioonide veapiiride kontseptsioonist.
Selle elutsükli meetodi kasutamiseks on erinevaid viise. Siiski on Reacti komponentides klahvivajutuse sündmuste käsitlemine tavaline nõue ja üks rakendatud strateegiatest on onKeyDowni sündmuse rakendamine. Sukeldume otse lahendusse.
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));
}
}
Vaatame nüüd koodi samm-sammult selgitust.
Sündmuste käsitlemine Reactis
React pakub sünteetilisi sündmusi, mis on ümber brauseri loomulike sündmuste, et tagada sündmustel järjepidevad omadused erinevates brauserites. Funktsioon "onKeyDown" on sündmuste töötleja, mis kutsutakse välja, kui kasutaja vajutab klahvi.
Komponentide elutsükli meetodid
Kui komponent renderdatakse DOM-i, läbib see mitu elutsükli etappi – paigaldamine, värskendamine ja lahtiühendamine. See annab võimaluse kapseldada nende käitumise teatud aspektide React komponente. Mälulekke vältimiseks lisame komponenti WillMount sündmustekuulaja ja eemaldame selle komponenti WillUnmount.
Samuti on oluline arvesse võtta muid komponente ja teeke, mis on seotud sündmuste käsitlemisega Reactis. Paljud teegid pakuvad lisafunktsioone ja täidavad selliseid ülesandeid nagu asünkrooniline sündmuste käsitlemine või gaasipedaali ja tagasilöögi sündmuste käitlejad.
Reactil on rikkalik raamatukogude ökosüsteem mis võib teie arendusprotsessi hõlbustada. Näiteks "react-use" on populaarne teek, mis pakub mitmeid kohandatud konkse, sealhulgas "useKey". 'useKey' on konks, mida saab kasutada klahvivajutuse sündmustele reageerimiseks. See muudab selle kasulikuks tööriistaks interaktiivsete Reacti rakenduste arendamisel.
Samuti tuleb arvestada jõudlusega seotud aspektidega. Näiteks kui lisate ja eemaldate ühe lehe rakenduses sageli sündmuste kuulajaid, võib see toimivust mõjutada. Seetõttu on oluline kaaluda sündmuste kuulajate lisamise ja eemaldamise strateegiat.
Klaviatuurisündmuste käsitlemine
Klaviatuurisündmused on sujuva kasutuskogemuse tagamiseks hädavajalikud. React pakub nende sündmuste käsitlemiseks meetodeid "onKeyDown", "onKeyPress" ja "onKeyUp". Olenevalt teie nõudest peate võib-olla jäädvustama ainult klahvivajutuse („onKeyDown“ või „onKeyPress“) või klahvi vabastamise („onKeyUp“).
