В этом уроке мы попробуем создать секундомер в 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;
Это оно. Наша программа закончена и готова к использованию. 🏆
ссылка: