Мастерство в использовании хука useTimeout в React

Введение

В этом лабораторном задании мы изучим, как реализовать функцию setTimeout() в декларативном стиле с использованием пользовательского хука useTimeout в React. Этот хук позволяет нам устанавливать таймаут и легко очищать его, а также запоминать последнюю функцию обратного вызова. Мы также рассмотрим пример использования хука useTimeout для создания таймера в одну секунду, который обновляет состояние компонента каждую секунду.

Хук useTimeout в React

В ВМ уже предоставлены index.html и script.js. В общем, вам нужно только добавить код в script.js и style.css.

Для реализации setTimeout() в декларативном стиле создайте пользовательский хук, который принимает callback и delay. Используйте хук useRef() для создания ref для функции обратного вызова, и используйте хук useEffect() для запоминания последней функции обратного вызова. Затем используйте хук useEffect() для настройки таймаута и очистки.

Вот пример кода, демонстрирующий этот подход:

const useTimeout = (callback, delay) => {
  const savedCallback = React.useRef();

  React.useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  React.useEffect(() => {
    const tick = () => {
      savedCallback.current();
    };
    if (delay !== null) {
      let id = setTimeout(tick, delay);
      return () => clearTimeout(id);
    }
  }, [delay]);
};

const => {
  const [seconds, setSeconds] = React.useState(0);

  useTimeout(() => {
    setSeconds(seconds + 1);
  }, 1000);

  return <p>{seconds}</p>;
};

ReactDOM.createRoot(document.getElementById("root")).render(<OneSecondTimer />);

Пожалуйста, нажмите кнопку "Go Live" в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили лабораторную работу по React useTimeout Hook. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.