Una sa lahat, pag-usapan natin ang componentDidCatch, na isang napaka makabuluhang paraan ng lifecycle sa React. Gumagana ang paraang ito bilang hangganan ng error sa JavaScript. Kung ang isang error ay itinapon sa isang bahagi, ang paraan ng componentDidCatch ay nakakakuha ng error at nagpapakita ng isang fallback na UI sa halip na i-crash ang buong app. Bahagi ito ng konseptong “Error Boundary” sa React 16 at mas mataas.
Mayroong iba't ibang paraan upang gamitin ang pamamaraang ito ng lifecycle. Gayunpaman, ang pangangasiwa ng mga keydown na event sa React na bahagi ay isang karaniwang kinakailangan, at isa sa mga diskarteng inilapat ay ang pagpapatupad ng onKeyDown na kaganapan. Sumisid tayo kaagad sa solusyon.
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));
}
}
Ngayon, dumaan tayo sa isang sunud-sunod na paliwanag ng code.
Pangangasiwa ng kaganapan sa React
Nagbibigay ang React ng mga sintetikong kaganapan na bumabalot sa mga native na kaganapan ng browser upang matiyak na ang mga kaganapan ay may pare-parehong katangian sa iba't ibang browser. Ang function na 'onKeyDown' ay isang event handler na tinatawag kapag pinindot ng user ang isang key.
Mga Paraan ng Component Lifecycle
Kapag ang isang bahagi ay na-render sa isang DOM, dumaan ito sa ilang yugto ng lifecycle – Pag-mount, Pag-update at Pag-unmount. Nagbibigay ito ng kakayahang i-encapsulate ang mga bahagi ng React ng ilang aspeto ng kanilang pag-uugali. Nagdaragdag kami ng tagapakinig ng kaganapan sa componentWillMount at ang pag-alis nito sa componentWillUnmount ay upang maiwasan ang pagtagas ng memorya.
Mahalaga rin na isaalang-alang ang iba pang mga bahagi at aklatan na kasangkot sa paghawak ng mga kaganapan sa React. Maraming library ang nagbibigay ng mga karagdagang feature at nagsasagawa ng mga gawain tulad ng async event handling, o throttle at debounce event handler.
Ang React ay may mayaman na ecosystem ng mga aklatan na makakapagpadali sa iyong proseso ng pag-unlad. Halimbawa, ang 'react-use' ay isang sikat na library na nagbibigay ng ilang custom na hook, kabilang ang 'useKey'. Ang 'useKey' ay isang hook na maaaring magamit upang tumugon sa mga kaganapan sa pagpindot sa keypress. Ginagawa nitong isang kapaki-pakinabang na tool sa pagbuo ng mga interactive na application ng React.
Gayundin, may mga aspetong nauugnay sa pagganap na dapat isaalang-alang. Halimbawa, sa isang application ng isang pahina, kung madalas kang nagdaragdag at nag-aalis ng mga tagapakinig ng kaganapan, maaari itong makaapekto sa pagganap. Samakatuwid, mahalagang isaalang-alang ang diskarte sa pagdaragdag at pag-alis ng mga tagapakinig ng kaganapan.
Pangangasiwa sa Mga Kaganapan sa Keyboard
Mahalaga ang mga kaganapan sa keyboard sa pagbibigay ng maayos na karanasan ng user. Nagbibigay ang React ng mga pamamaraan ng 'onKeyDown', 'onKeyPress', at 'onKeyUp' para pangasiwaan ang mga kaganapang ito. Depende sa iyong kinakailangan, maaaring kailanganin mong makuha lamang ang kaganapan ng pagpindot sa key ('onKeyDown' o 'onKeyPress'), o ang kaganapan ng paglabas ng key ('onKeyUp').
