Секундомер React

На этой неделе я вернулся к основам, чтобы усовершенствовать использование хуков, построив секундомер с функцией реакции. Я думаю, что это хороший маленький проект, который можно выполнить всего за несколько часов, и это хороший способ попрактиковаться в хуках React. С помощью этого секундомера вы можете запустить время, остановить время и сбросить его. Приступим и посмотрим на код.

Мы собираемся удалить все файлы в папке src, кроме App.css, App.js и index.js, и удалить весь импорт. Мы будем использовать хуки состояния и эффекта. Так будет выглядеть наш исходный компонент.

Отлично, теперь мы должны отображать наше время. Мы начнем с отображения миллисекунд. Начнем с создания useEffect. Сначала будет определен наш интервал, и если start истинно, таймер запустится, в противном случае мы очистим интервал. Во втором аргументе useEffect мы собираемся передать массив со значением start. Это означает, что наш эффект сработает при изменении начального состояния. Мы также добавим оператор возврата для очистки. Наконец, у нас будет кнопка, которая запустит время при нажатии. Вот как это будет выглядеть.

Теперь наше время начнет отсчитываться. На данный момент нет возможности остановить или сбросить секундомер. Нам также необходимо отформатировать то, что отображается, чтобы число выглядело правильно. Для этого есть хороший трюк. Сначала мы разделим время на 10, потому что это значение миллисекунды, а затем по модулю 1000. Теперь мы добавим это к нулю, чтобы, когда время начнется, уже будет ноль вместо одной цифры. Наконец, мы разрежем и передадим параметр -2, чтобы, когда число стало двухзначным, ноль был удален. Вот как это будет выглядеть.

Теперь отображаемое число будет иметь больше смысла. Наконец, нам нужно показать секунды, минуты и создать кнопки остановки и сброса. Создание минут и секунд действительно похоже на то, что мы сделали с миллисекундами. Мы можем копировать и вставлять и вносить некоторые изменения. Вместо того, чтобы использовать модуль на 1000, мы сделаем это на 60. Еще нам нужно будет округлить числа в меньшую сторону, поскольку десятичные числа будут отображаться, если мы оставим их как есть. Кнопки тоже очень похожи на ту, что у нас уже есть. Например, мы установим начальное состояние в false в кнопке остановки. Для кнопки сброса мы установим время на 0, а также установим start на false. Вот как будет выглядеть готовый секундомер.

Это хороший способ попрактиковаться в некоторых основах, таких как хуки. Эти же методы можно использовать для создания других подобных проектов, таких как таймер или часы. Строить это было очень весело, и это не заняло много времени. Надеюсь, вам понравится так же весело, как и мне. Удачного кодирования! 😎