React хук useRequestAnimationFrame

Введение

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

Skills Graph

React хук useRequestAnimationFrame

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

Для запуска функции анимации перед каждым перерисованием используйте хук useRef(), чтобы создать переменные requestRef и previousTimeRef. Затем определите функцию animate(), которая обновляет эти переменные, запускает callback и постоянно вызывает Window.requestAnimationFrame(). Наконец, используйте хук useEffect() с пустым массивом, чтобы инициализировать значение requestRef с помощью Window.requestAnimationFrame(), и используйте возвращаемое значение и Window.cancelAnimationFrame(), чтобы очистить ресурсы при размонтировании компонента.

Вот пример реализации useRequestAnimationFrame():

const useRequestAnimationFrame = (callback) => {
  const requestRef = React.useRef();
  const previousTimeRef = React.useRef();

  const animate = (time) => {
    if (previousTimeRef.current) {
      callback(time - previousTimeRef.current);
    }
    previousTimeRef.current = time;
    requestRef.current = requestAnimationFrame(animate);
  };

  React.useEffect(() => {
    requestRef.current = requestAnimationFrame(animate);
    return () => cancelAnimationFrame(requestRef.current);
  }, []);
};

Для использования этого пользовательского хука в компоненте просто передайте ему функцию обратного вызова. Например, чтобы создать простой счетчик, который обновляется с частотой 100 кадров в секунду:

const Counter = () => {
  const [count, setCount] = React.useState(0);

  useRequestAnimationFrame((deltaTime) => {
    setCount((prevCount) => (prevCount + deltaTime * 0.01) % 100);
  });

  return <p>{Math.round(count)}</p>;
};

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

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

Резюме

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