Автор оригинала: FreeCodeCamp Community Member.
Tiffany White.
Я люблю CodeSandbox Отказ Он в значительной степени заменена кодом для меня, если я не возобновляюсь с CSS или FreeCodecamp передние проекты.
Мне нравится проходить через песочницы и выбирая разные, чтобы посмотреть, разбираться и выяснить, как они работают.
Во время прохождения React Reactorial для начинающих по Кент C. Доджи на EGGHEAD.IO С Я решил, что буду искать песочницы, которые коррелировали с курсом, так как я использовал CodeSandbox, чтобы построить секундомер, который мы строили в этом курсе.
Я нашел песочница которые я развесил и обнаружил, что багги.
Почему не работает секундомер? В течение нескольких секунд поглядывая в код в коде, я сразу видел некоторые очевидные проблемы.
Вот пример сломанного секундомера:
Bugfix 1.
Первое, что я заметил, был на линии 7:
Date.now () нуждаются в скобках. Дата это конструктор объекта с .Теперь () быть методом. Когда мы нажимаем на кнопку «Пуск», Rect не знает, что здесь делать; Мы не устанавливаем состояние промежуток быть рядом, который мы ожидаем. Добавляя скобки, мы получаем кнопку START для работы. Нет больше Nanms Отказ
Но теперь у нас есть еще одна проблема: Таймер не остановится Отказ
Я также удалил console.log (math.random ()); Потому что я чувствовал, что это ненужно.
Bugfix 2: Получение секундомера остановиться и очистить
Каждый раз, когда кнопка нажала, мы устанавливаем состояние на Бег или промежуток Отказ Таймер работает, когда мы нажимаем Начать Но нажатие Стоп или ясно Похоже, не работает. Как мы можем это исправить?
Мы можем создать функцию обновления таймера, которая принимает текущее состояние. Мы можем достичь этого, используя нативные API для DOM, такие как SetInterval () и ClearInterval () Отказ Мы можем запустить условному логику, чтобы увидеть, работает ли таймер:
и использовать Date.now () Чтобы получить временную тему в MS, и назначьте его Запуск переменная для сравнения текущего времени до прошедшего времени времени. Когда мы нажимаем кнопку «Пуск», он устанавливает Запуск к текущему временному времени. Нам также нужно вернуть новое состояние как государство – не смешно.
Хорошо, так это частично работает. Но, как вы можете увидеть ниже, если я нажму ясно Пока таймер секундомера работает, это не Очистить таймер, и он также не позволяет мне Стоп Таймер тоже.
Как мы исправим эту конкретную ошибку?
Если мы оглянемсь назад на предыдущий код, мы можем видеть, что мы используем ClearInterval () Чтобы сбросить таймер секундомера. В нашей нынешней итерации наше Руководство Метод просто Настройка состояние без Очистка предыдущее состояние.
Мы можем исправить это, добавив ClearInterval () и прохождение в функции таймера для Руководство метод очистки состояния.
Это даст нам результаты, которые мы хотим.
Потенциальная проблема?
В этой конкретной итерации есть утечка памяти. Таймер будет работать до тех пор, пока он не будет Явно остановился в доме. Мы можем использовать Метод жизненного цикла реагирования Чтобы остановить все процессы в DOM, когда этот компонент установлен или размонтированный.
Для этого мы можем использовать ComponentWillunmount Чтобы сказать отреагировать, чтобы размонтировать компонент после того, как он сделан рендеринг.
Мысли и выводы
Я нахожу гораздо более приятным исправлением Другие люди жуки, чем мои. Это было веселое упражнение, и я планирую сделать это более регулярно и вести блог об этом.
Этот секундомер – это глупый простым компонентом, но если вы просто царапаете поверхность реагирования, как я, я уверен, что я копаюсь в чем-то вроде этого секундомера, и выясняется, как это работает, – это отличное управление и использование времени.
Подпишитесь на рассылку новостей. Без спама. Я тоже ненавижу это тоже.
Оригинал: “https://www.freecodecamp.org/news/my-latest-bugfix-or-how-i-went-spelunking-in-someone-elses-code-2afb536504ed/”