В этом задании мы познакомимся с хуком useEffect и научимся работать с интервалами времени.
useEffect - это хук для выполнения побочных эффектов в компонентах. Побочные эффекты - это действия, которые выходят за рамки рендеринга: запросы к серверу, подписки на события, таймеры.
Представьте, что ваш компонент - это художник, который рисует картину (рендерит JSX). А useEffect - это действия после завершения рисования: повесить картину на стену, включить подсветку, установить сигнализацию.
Базовый синтаксис useEffect:
useEffect(()=>{// Код, который выполнится после рендераconsole.log('Компонент отрисовался');},[dependencies]);// Массив зависимостей
Для создания таймера используется функция setInterval, которая выполняет код через заданные промежутки времени:
Важно: интервалы нужно очищать, чтобы они не работали после удаления компонента. Для этого useEffect может возвращать cleanup функцию:
useEffect(()=>{const timer =setInterval(()=>{setCount(count +1);},1000);return()=>clearInterval(timer);// Очистка при размонтировании},[count]);
Массив зависимостей определяет, когда эффект должен перезапуститься. Если в массиве указаны переменные, эффект выполнится заново при их изменении.
Задание
Необходимо создать таймер обратного отсчёта с управлением. Создайте состояния: inputMinutes (количество минут, начальное значение 1), timeLeft (оставшееся время в секундах, начальное 60), isRunning (запущен ли таймер, начальное false), isPaused (на паузе ли, начальное false). В useEffect создайте интервал, который каждую секунду уменьшает timeLeft на 1, если таймер запущен и не на паузе. Если timeLeft достигает 0, остановите таймер. Верните cleanup функцию с clearInterval. Реализуйте функции: startTimer (запускает таймер), pauseTimer (ставит на паузу), resumeTimer (снимает с паузы), stopTimer (останавливает и обнуляет), resetTimer (возвращает к начальному значению). Создайте поле ввода для установки минут (показывать только когда таймер не запущен), дисплей с форматированным временем в формате MM:SS и кнопки управления, которые показываются в зависимости от состояния таймера.
