oss-react-ls6-practice-task

oss-react-ls6-practice-task.md

Практическое задание

---

Задача 1

Создайте 2 компонента, один из которых должен получить prop с именем name, а затем отобразить это

Welcome {props.name} to Ossystem

Тогда вторым компонентом должны быть часы, которые отображают текущее время в браузере. Таким образом, что каждую секунду время должно обновляться и в браузере. Должно вернуть это

The time now is {state.time}

Демо 1

Советы

1. Храните время в состоянии и обновляйте его каждую секунду

2. Чтобы получить время в строке, используйте const time = new Date().toLocaleTimeString();

Задача 2

Перед обновлением времени в браузере вы должны проверить его, если последнее значение в секундах меньше или равно 5, затем обновить, если нет, не обновлять. Например:

...
4:20:47 => не обновлять, потому что 7 является последним значением и больше 5
4:20:48 => не обновлять, потому что 8 является последним значением и больше 5
4:20:49 => не обновлять, потому что 9 является последним значением и больше 5
4:20:50 => обновить, потому что 0 является последним значением и меньше 5
4:20:51 => обновить, потому что 1 является последним значением и меньше 5
4:20:52 => обновить, потому что 2 является последним значением, и оно меньше, чем 5
4:20:53 => обновить, потому что 3 является последним значением и меньше 5
4:20:54 => обновить, потому что 4 является последним значением и меньше 5
4:20:55 => обновить, потому что 5 является последним значением, и оно равно 5
4:20:56 => не обновлять, потому что 6 является последним значением и больше 5
4:20:57 => не обновлять, потому что 7 - последнее значение, и оно больше 5
4:20:58 => не обновлять ....
4:20:59 => не обновлять ....
...

Демо 2

Внимание

Для реализации этой задачи необходимо использовать жизненные циклы компонентов