useEffect дар React барои коркардиҳои глобалӣ
Фарз мекунем, ки акнун мо мехоҳем,
ранг на танҳо бо клик кардан
рӯи тугма, балки бо пахш кардани Enter
рӯи клавиатура низ иваз шавад. Дар ҳаёти оддии React
гуш кардани объекти глобалӣ window
бо истифода аз
addEventListener
имконнопазир аст. Барои ин мо эффектҳо дорем. Биёед
ин амалро бо ёрии useEffect илова кунем.
Функсияи коркардиро
барои клик кардан рӯи Enter менависем. Бигзор ранги
дар ин ҳолат ба сурх табдил ёбад:
function handleEnter(event) {
if (event.keyCode === 13) {
setColor('surx');
}
}
Акнун гуш кардани ҳодисаҳоро
ба window дар ҳуки useEffect мепайвастем:
useEffect(() => {
document.body.style.color = color;
window.addEventListener('keydown', handleEnter);
}, [color]);
Агар мо кадом функсияи насбкунанда дошта бошем,
ҳамеша бояд дар useEffect
коди тозакуниро баргардонем, то
аз мушкилиҳо дар оянда ҷилавгирӣ кунем. Дар ин
ҳолат мо баъд аз васл кардани
addEventListener бояд ҳазви онро
баргардонем:
useEffect(() => {
document.body.style.color = color;
window.addEventListener('keydown', handleEnter);
return () => {
window.removeEventListener('keydown', handleEnter);
};
}, [color]);
Компонент дода шудааст. Чунон кунед, ки бо клик кардан ба ҳар як ҷои саҳифа заминаи ин компонент ранги худро иваз кунад.
Истинодеро созед, ки бо пахш кардан ба он блок пайдо шавад. Чунон кунед, ки бо пахш кардан ба ҳар як ҷои равзанаи браузер блоки мо пинҳон шавад.