В этом уроке мы попробуем создать секундомер в React.

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

Без дальнейших церемоний давайте погрузимся.

Я полагаю, вы уже начали свой проект React. Если вы не рекомендовали использовать Vite вместо Create React App, потому что в Vite есть все необходимые папки, простые и короткие. Я помню, как удалил кучу папок, когда использовал приложение Create React, и теперь мы не хотим тратить ваше драгоценное время, не так ли? 😌

Теперь, когда мы уже начали проект, создайте новый компонент с именем StopWatch.jsx (мы используем jsx, потому что в конце мы добавим в компонент немного html)

  • небольшое примечание: рекомендуется размещать все компоненты в папке компонентов
import React, { useState, useEffect } from "react";
const StopWatch = () => {};
export default StopWatch;

Для нашей программы мы будем использовать две функции из React и немного базовой математики для преобразования чисел во время.
Если вы внимательно посмотрите на приведенный выше код, мы импортировали React Hooks useState() и useEffect() для дальнейшего использования. Один позволяет нам хранить данные и следить за тем, работает ли секундомер, а второй будет проверять процесс таймера и обновлять время.

Для этого в нашей функции StopWatch нам нужно добавить состояния.

const StopWatch = () => {
  const [time, setTime] = useState(0);
  const [process, setProcess] = useState(false);
};
export default StopWatch;

Для управления временем секундомера и вычислений нам понадобится второй хук, useEffect() и дополнительный встроенный метод setInterval().

const [time, setTime] = useState(0);
const [process, setProcess] = useState(false);
  useEffect(() => {
    let interval;
    if (process) {
      interval = setInterval(() => {
        setTime((prevTime) => prevTime + 10);
      }, 10);
    } else if (!process) {
      clearInterval(interval);
    }
    return () => clearInterval(interval);
  }, [process]);
};

Что касается математической части, мы включим ее в тот же компонент, как показано в коде ниже:

return (
    <div>
    
        <span>{("0" + Math.floor((time / 60000) % 60)).slice(-2)}:</span>
        <span>{("0" + Math.floor((time / 1000) % 60)).slice(-2)}:</span>
    </div>
  );

Время рассчитывается путем деления времени на количество миллисекунд для каждой единицы времени. Затем мы используем оператор остатка %, чтобы вычислить, делится ли время на 60 для секунд, 60 для минут и 100 для миллисекунд. Например, 1 минута 20 секунд — это 80000 миллисекунд, поэтому для вычисления секунд мы делаем (80000 / 1000) % 60 = 20. Без оператора остатка (80000 / 1000) = 80 мы просто получаем общее количество секунд.

И вот наступает волшебная часть 😋 чтобы программа запускалась с самого начала без каких-либо звездочек или кнопок остановки и дополнительного кода, мы изменим значение по умолчанию useStates на «true», и когда окно загрузится, таймер автоматически запустится.

const [process, setProcess] = useState(false);

И вот наш результат:

Это все для этого проекта, и если мы хотим отобразить его в основном App.jsx, нам нужно только импортировать в него наш компонент секундомера, как это указано в коде ниже.

import StopWatch from "./Stopwatch";
const App = () => {
  return (
    <div className="App">
      <p>Time</p>
      <Stopwatch />
    </div>
  );
};
export default App;

Это оно. Наша программа закончена и готова к использованию. 🏆

ссылка: