Лучшие крючки React — Вибрация, видео и интервалы

Хуки содержат наш логический код в нашем приложении React.

Мы можем создавать свои собственные хуки и использовать хуки, предоставленные другими людьми.

В этой статье мы рассмотрим некоторые полезные хуки React.

реагировать-использовать

Библиотека react-use — это большая библиотека с множеством удобных хуков.

useVibrate

Хук useVibrate позволяет нам вибрировать наше устройство на любом устройстве, которое на это способно.

Например, мы можем использовать его, написав:

import React from "react";
import { useToggle, useVibrate } from "react-use";
export default function App() {
  const [vibrating, toggleVibrating] = useToggle(false);
  useVibrate(vibrating, [360, 120, 260, 110, 1420, 300], false);
  return (
    <div>
      <button onClick={toggleVibrating}>
        {vibrating ? "Stop" : "Vibrate"}
      </button>
    </div>
  );
}

У нас есть крючок useToggle для переключения вибрации.

Хук useVibrate принимает состояние vibrating, которое мы создали ранее.

Массив имеет массив с величиной колебаний в каждой записи.

Третий аргумент указывает, хотим ли мы зацикливаться или нет.

useVideo

Хук useVideo позволяет нам создать элемент видео с элементами управления.

Чтобы использовать его, мы пишем:

import React from "react";
import { useVideo } from "react-use";
export default function App() {
  const [video, state, controls, ref] = useVideo(
    <video
      src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480useVibrate5MG.mp4"
      autoPlay
    />
  );
  return (
    <div>
      <pre>{JSON.stringify(state, null, 2)}</pre>
      <button onClick={controls.pause}>Pause</button>
      <button onClick={controls.play}>Play</button>
      <button onClick={controls.mute}>Mute</button>
      <button onClick={controls.unmute}>Un-mute</button>
      <button onClick={() => controls.volume(0.1)}>Volume: 10%</button>
      <button onClick={() => controls.volume(0.5)}>Volume: 50%</button>
      <button onClick={() => controls.volume(1)}>Volume: 100%</button>
      <button onClick={() => controls.seek(state.time - 5)}>-5 sec</button>
      <button onClick={() => controls.seek(state.time + 5)}>+5 sec</button>
      {video}
    </div>
  );
}

использовать крючок.

useVideo принимает компонент для рендеринга видео.

И он возвращает массив с различными переменными.

video содержит сам компонент видеоплеера.

state находится в состоянии воспроизведения видео.

Состояние имеет time, что является временем, в которое идет видео.

duration имеет продолжительность видео.

paused указывает, приостановлено видео или нет.

muted указывает, отключен звук видео или нет.

controls имеет метод, позволяющий нам управлять видео.

useRaf

Хук useRaf позволяет нам принудительно отображать компонент на каждом requestAnimationFrame .

Возвращает процент прошедшего времени.

Чтобы использовать его, мы можем написать:

import React from "react";
import { useRaf } from "react-use";
export default function App() {
  const elapsed = useRaf(15000, 1000);
  return <div>Elapsed: {elapsed}</div>;
}

У нас есть хук useRaf с двумя аргументами.

Во-первых, это продолжительность анимации.

2-й - это задержка, после которой начинается повторный рендеринг компонента.

Они оба в миллисекундах.

useInterval

Хук useInterval позволяет нам периодически запускать фрагмент кода.

Чтобы использовать его, мы можем написать:

import React from "react";
import { useInterval, useBoolean } from "react-use";
export default function App() {
  const [count, setCount] = React.useState(0);
  const [isRunning, toggleIsRunning] = useBoolean(true);
  useInterval(
    () => {
      setCount(count + 1);
    },
    isRunning ? 1000 : null
  );
  return (
    <div>
      <h1>count: {count}</h1>
      <div>
        <button onClick={toggleIsRunning}>
          {isRunning ? "stop" : "start"}
        </button>
      </div>
    </div>
  );
}

Мы используем хук useInterval с двумя аргументами.

Обратный вызов, который выполняется периодически, является первым аргументом.

Второй аргумент — это длина между каждым обратным вызовом.

Если это null, то обратный вызов не выполняется.

Вывод

Библиотека реактивного использования позволяет нам периодически запускать код, выполнять повторный рендеринг во время каждого вызова requestAnimationFrame, вибрировать наше устройство и отображать видео.