当前位置：首页 > article >正文

WHAT - 通过 react-use 源码学习 React（Animations 篇）

article 2024/9/20 13:32:22

一、官方介绍

Github 地址

react-use 是一个流行的 React 自定义 Hook 库，提供了一组常用的 Hook，以帮助开发者在 React 应用程序中更方便地处理常见的任务和功能。

官方将 react-use 的 Hook 分成了以下几个主要类别，以便更好地组织和查找常用的功能。每个类别涵盖了不同类型的 Hook，满足各种开发需求。以下是这些类别的详细说明：

1. Sensors

功能: 主要涉及与浏览器或用户交互相关的传感器功能。
示例:
- useMouse: 获取鼠标位置。
- useWindowSize: 获取窗口尺寸。
- useBattery: 监控电池状态。

2. UI

功能: 涉及用户界面相关的功能，如处理样式、显示和隐藏元素等。
示例:
- useClickAway: 监听点击事件以检测用户点击是否发生在组件外部。
- useMeasure: 测量元素的大小和位置。
- useDarkMode: 管理和检测暗模式状态。

3. Animations

功能: 处理动画和过渡效果。
示例:
- useSpring: 使用 react-spring 处理动画效果。
- useTransition: 使用 react-spring 处理过渡动画。

4. Side-Effects

功能: 处理副作用相关的 Hook，包括数据获取、异步操作等。
示例:
- useAsync: 处理异步操作，如数据获取，并提供状态和结果。
- useFetch: 简化数据获取操作。
- useAxios: 使用 Axios 进行数据请求的 Hook。

5. Lifecycles

功能: 处理组件生命周期相关的 Hook。
示例:
- useMount: 在组件挂载时执行的 Hook。
- useUnmount: 在组件卸载时执行的 Hook。
- useUpdate: 在组件更新时执行的 Hook。

6. State

功能: 管理组件状态和相关逻辑。
示例:
- useState: 提供基本状态管理功能。
- useReducer: 替代 useState 实现更复杂的状态逻辑。
- useForm: 管理表单状态和验证。
- useInput: 管理输入字段的状态。

7. Miscellaneous

功能: 各种其他实用功能的 Hook，涵盖一些不容易归类到其他类别的功能。

这种分类方法使得 react-use 的 Hook 更加有组织和易于查找，帮助开发者快速找到需要的功能并有效地集成到他们的应用程序中。

二、源码学习

Animations - useRaf

re-renders component on each requestAnimationFrame.

使用

import {useRaf} from 'react-use';

const Demo = () => {
  const elapsed = useRaf(5000, 1000);

  return (
    <div>
      Elapsed: {elapsed}
    </div>
  );
};

源码

import { useState } from 'react';
import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';

const useRaf = (ms: number = 1e12, delay: number = 0): number => {
  const [elapsed, set] = useState<number>(0);

  useIsomorphicLayoutEffect(() => {
    let raf;
    let timerStop;
    let start;

    const onFrame = () => {
      const time = Math.min(1, (Date.now() - start) / ms);
      set(time);
      loop();
    };
    const loop = () => {
      raf = requestAnimationFrame(onFrame);
    };
    const onStart = () => {
      timerStop = setTimeout(() => {
        cancelAnimationFrame(raf);
        set(1);
      }, ms);
      start = Date.now();
      loop();
    };
    const timerDelay = setTimeout(onStart, delay);

    return () => {
      clearTimeout(timerStop);
      clearTimeout(timerDelay);
      cancelAnimationFrame(raf);
    };
  }, [ms, delay]);

  return elapsed;
};

export default useRaf;

解释

useRaf 这个 hook 主要用于在 React 组件中实现基于 requestAnimationFrame 的计时器功能。这个功能可以用于创建动画效果或在特定的时间间隔内执行操作。以下是对这个 API 的详细解析：

useRaf Hook 的参数

ms: number = 1e12:
- 这个参数定义了计时器的持续时间，单位为毫秒。默认为 1e12（即 10^12 毫秒，约 31.7 年），通常你会根据需求设置为一个更合理的值。
delay: number = 0:
- 这个参数定义了在计时器开始之前的延迟，单位为毫秒。默认为 0，意味着计时器会立即开始。

useIsomorphicLayoutEffect 函数

import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';

useIsomorphicLayoutEffect 是一个自定义 hook，它的作用类似于 useLayoutEffect，但可以在服务端渲染和客户端渲染中都有效。通常用于需要在 DOM 更新之前执行副作用的情况。这个 hook 需要在你的项目中被实现或引入。

useLayoutEffect is a version of useEffect that fires before the browser repaints the screen.

useRaf 的内部逻辑

const [elapsed, set] = useState<number>(0);:
- elapsed 状态用于存储从计时器开始到当前的时间进度。set 是更新这个状态的函数。
useIsomorphicLayoutEffect:
- 这个 hook 用于在组件渲染后执行副作用，并且在服务端渲染时也能正常工作。
- 内部副作用函数:
  - 变量:
    - raf: 用于存储 requestAnimationFrame 返回的 ID。
    - timerStop: 用于存储 setTimeout 返回的 ID，用于停止计时器。
    - start: 记录计时器开始的时间。
  - onFrame:
    - 这是在每一帧时调用的函数。它计算经过的时间并更新状态 elapsed，然后请求下一帧的动画。
  - loop:
    - 使用 requestAnimationFrame 来持续调用 onFrame。
  - onStart:
    - 设定计时器的开始函数。
    - 使用 setTimeout 来在设定的时间 ms 后停止计时器，并更新状态为 1。
    - 记录计时器的开始时间，并启动动画循环。
  - timerDelay:
    - 使用 setTimeout 来在设定的延迟时间 delay 后调用 onStart。
  - 清理函数:
    - 在副作用清理阶段，清除所有 setTimeout 和 requestAnimationFrame，以避免内存泄漏和不必要的更新。

返回值

return elapsed;:
- 返回从计时器开始到当前的时间进度，取值范围是 0 到 1，表示时间的百分比。

useRaf hook 提供了一种基于 requestAnimationFrame 的计时器功能，适用于需要精确动画时间的场景。它允许你在一定的延迟后开始计时，并在设定的时间后停止计时。这个 hook 管理了动画帧的请求和取消，以及定时器的设置和清理，确保在组件卸载时不会产生内存泄漏或不必要的更新。

业务场景

useRaf hook 基于 requestAnimationFrame 实现了一个计时器功能，它可以在 React 组件中管理时间进度。这个 hook 主要用于需要高精度动画时间的场景。以下是一些实际的业务适用场景：

1. 动画和过渡效果

动画进度管理:
- 用于创建基于时间的动画效果，比如渐变、缩放或位移动画。useRaf 可以提供从 0 到 1 的进度值，帮助你精确控制动画状态。
复杂动画:
- 当你需要对复杂的动画进行精细控制时，useRaf 可以帮助你在每一帧上计算和更新动画状态。例如，一个复杂的动画可能包括多个阶段或缓动效果。

2. 游戏开发

游戏循环:
- 在游戏开发中，你需要高频率的帧更新来保证流畅的游戏体验。useRaf 可以用作游戏的主要循环，处理游戏逻辑、物体移动和渲染。
动画帧控制:
- 处理游戏角色或物体的动画状态，确保动画与屏幕刷新同步。

3. 数据可视化

实时数据更新:
- 用于实时数据可视化，比如图表和图形的动态更新。useRaf 可以帮助你在每一帧更新数据并重新渲染图表，确保平滑的视觉效果。
动态绘图:
- 在需要动态绘制图形或更新可视化组件时，useRaf 可以确保每一帧的更新与浏览器的重绘周期一致，从而实现更流畅的用户体验。

4. UI 组件

滚动效果:
- 创建平滑的滚动效果，比如滚动条动画或平滑滚动的内容区域。useRaf 可以在每一帧更新滚动位置或内容。
拖放操作:
- 在拖放操作中，实时更新拖动元素的位置，确保拖动效果与屏幕刷新同步。

5. 时间驱动的 UI 效果

延迟显示:
- 在用户交互后延迟显示某些 UI 元素（例如，工具提示或菜单）。useRaf 可以帮助你精确控制显示延迟和过渡效果。
定时器和计时器:
- 实现定时器或倒计时功能，确保时间进度的更新与屏幕刷新一致。

实现示例

假设你想实现一个简单的渐变动画，你可以使用 useRaf 来管理动画进度：

import React from 'react';
import useRaf from './useRaf';

const GradientAnimation = () => {
  const progress = useRaf(2000, 500); // 2秒动画，500毫秒延迟

  const backgroundColor = `rgba(255, 0, 0, ${progress})`; // 渐变效果

  return (
    <div style={{ width: '100vw', height: '100vh', backgroundColor }}>
      <h1>Gradient Animation</h1>
    </div>
  );
};

export default GradientAnimation;