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

于 2024-08-28 15:29:53 发布
阅读量467 收藏 3
点赞数 11
文章标签： react.js 学习 ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58540586/article/details/141640475
版权

目录

一、官方介绍

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 更加有组织和易于查找，帮助开发者快速找到需要的功能并有效地集成到他们的应用程序中。

二、源码学习

示例：n. xx - yy

something

使用

源码

解释

UI - useAudio

plays audio and exposes its controls.

使用

import {useAudio} from 'react-use';

const Demo = () => {
  const [audio, state, controls, ref] = useAudio({
    src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',
    autoPlay: true,
  });

  return (
    <div>
      {audio}
      <pre>{JSON.stringify(state, null, 2)}</pre>
      <button onClick={controls.pause}>Pause</button>
      <button onClick={controls.play}>Play</button>
      <br/>
      <button onClick={controls.mute}>Mute</button>
      <button onClick={controls.unmute}>Un-mute</button>
      <br/>
      <button onClick={() => controls.volume(.1)}>Volume: 10%</button>
      <button onClick={() => controls.volume(.5)}>Volume: 50%</button>
      <button onClick={() => controls.volume(1)}>Volume: 100%</button>
      <br/>
      <button onClick={() => controls.seek(state.time - 5)}>-5 sec</button>
      <button onClick={() => controls.seek(state.time + 5)}>+5 sec</button>
    </div>
  );
};

源码

import createHTMLMediaHook from './factory/createHTMLMediaHook';

const useAudio = createHTMLMediaHook<HTMLAudioElement>('audio');
export default useAudio;

//./factory/createHTMLMediaHook
import * as React from 'react';
import { useEffect, useRef } from 'react';
import useSetState from '../useSetState';
import parseTimeRanges from '../misc/parseTimeRanges';

export interface HTMLMediaProps
  extends React.AudioHTMLAttributes<any>,
    React.VideoHTMLAttributes<any> {
  src: string;
}

export interface HTMLMediaState {
  buffered: any[];
  duration: number;
  paused: boolean;
  muted: boolean;
  time: number;
  volume: number;
  playing: boolean;
}

export interface HTMLMediaControls {
  play: () => Promise<void> | void;
  pause: () => void;
  mute: () => void;
  unmute: () => void;
  volume: (volume: number) => void;
  seek: (time: number) => void;
}

type MediaPropsWithRef<T> = HTMLMediaProps & { ref?: React.MutableRefObject<T | null> };

export default function createHTMLMediaHook<T extends HTMLAudioElement | HTMLVideoElement>(
  tag: 'audio' | 'video'
) {
  return (elOrProps: HTMLMediaProps | React.ReactElement<HTMLMediaProps>) => {
    let element: React.ReactElement<MediaPropsWithRef<T>> | undefined;
    let props: MediaPropsWithRef<T>;

    if (React.isValidElement(elOrProps)) {
      element = elOrProps;
      props = element.props;
    } else {
      props = elOrProps;
    }

    const [state, setState] = useSetState<HTMLMediaState>({
      buffered: [],
      time: 0,
      duration: 0,
      paused: true,
      muted: false,
      volume: 1,
      playing: false,
    });
    const ref = useRef<T | null>(null);

    const wrapEvent = (userEvent, proxyEvent?) => {
      return (event) => {
        try {
          proxyEvent && proxyEvent(event);
        } finally {
          userEvent && userEvent(event);
        }
      };
    };

    const onPlay = () => setState({ paused: false });
    const onPlaying = () => setState({ playing: true });
    const onWaiting = () => setState({ playing: false });
    const onPause = () => setState({ paused: true, playing: false });
    const onVolumeChange = () => {
      const el = ref.current;
      if (!el) {
        return;
      }
      setState({
        muted: el.muted,
        volume: el.volume,
      });
    };
    const onDurationChange = () => {
      const el = ref.current;
      if (!el) {
        return;
      }
      const { duration, buffered } = el;
      setState({
        duration,
        buffered: parseTimeRanges(buffered),
      });
    };
    const onTimeUpdate = () => {
      const el = ref.current;
      if (!el) {
        return;
      }
      setState({ time: el.currentTime });
    };
    const onProgress = () => {
      const el = ref.current;
      if (!el) {
        return;
      }
      setState({ buffered: parseTimeRanges(el.buffered) });
    };

    if (element) {
      element = React.cloneElement(element, {
        controls: false,
        ...props,
        ref,
        onPlay: wrapEvent(props.onPlay, onPlay),
        onPlaying: wrapEvent(props.onPlaying, onPlaying),
        onWaiting: wrapEvent(props.onWaiting, onWaiting),
        onPause: wrapEvent(props.onPause, onPause),
        onVolumeChange: wrapEvent(props.onVolumeChange, onVolumeChange),
        onDurationChange: wrapEvent(props.onDurationChange, onDurationChange),
        onTimeUpdate: wrapEvent(props.onTimeUpdate, onTimeUpdate),
        onProgress: wrapEvent(props.onProgress, onProgress),
      });
    } else {
      element = React.createElement(tag, {
        controls: false,
        ...props,
        ref,
        onPlay: wrapEvent(props.onPlay, onPlay),
        onPlaying: wrapEvent(props.onPlaying, onPlaying),
        onWaiting: wrapEvent(props.onWaiting, onWaiting),
        onPause: wrapEvent(props.onPause, onPause),
        onVolumeChange: wrapEvent(props.onVolumeChange, onVolumeChange),
        onDurationChange: wrapEvent(props.onDurationChange, onDurationChange),
        onTimeUpdate: wrapEvent(props.onTimeUpdate, onTimeUpdate),
        onProgress: wrapEvent(props.onProgress, onProgress),
      } as any); // TODO: fix this typing.
    }

    // Some browsers return `Promise` on `.play()` and may throw errors
    // if one tries to execute another `.play()` or `.pause()` while that
    // promise is resolving. So we prevent that with this lock.
    // See: https://bugs.chromium.org/p/chromium/issues/detail?id=593273
    let lockPlay: boolean = false;

    const controls = {
      play: () => {
        const el = ref.current;
        if (!el) {
          return undefined;
        }

        if (!lockPlay) {
          const promise = el.play();
          const isPromise = typeof promise === 'object';

          if (isPromise) {
            lockPlay = true;
            const resetLock = () => {
              lockPlay = false;
            };
            promise.then(resetLock, resetLock);
          }

          return promise;
        }
        return undefined;
      },
      pause: () => {
        const el = ref.current;
        if (el && !lockPlay) {
          return el.pause();
        }
      },
      seek: (time: number) => {
        const el = ref.current;
        if (!el || state.duration === undefined) {
          return;
        }
        time = Math.min(state.duration, Math.max(0, time));
        el.currentTime = time;
      },
      volume: (volume: number) => {
        const el = ref.current;
        if (!el) {
          return;
        }
        volume = Math.min(1, Math.max(0, volume));
        el.volume = volume;
        setState({ volume });
      },
      mute: () => {
        const el = ref.current;
        if (!el) {
          return;
        }
        el.muted = true;
      },
      unmute: () => {
        const el = ref.current;
        if (!el) {
          return;
        }
        el.muted = false;
      },
    };

    useEffect(() => {
      const el = ref.current!;

      if (!el) {
        if (process.env.NODE_ENV !== 'production') {
          if (tag === 'audio') {
            console.error(
              'useAudio() ref to <audio> element is empty at mount. ' +
                'It seem you have not rendered the audio element, which it ' +
                'returns as the first argument const [audio] = useAudio(...).'
            );
          } else if (tag === 'video') {
            console.error(
              'useVideo() ref to <video> element is empty at mount. ' +
                'It seem you have not rendered the video element, which it ' +
                'returns as the first argument const [video] = useVideo(...).'
            );
          }
        }
        return;
      }

      setState({
        volume: el.volume,
        muted: el.muted,
        paused: el.paused,
      });

      // Start media, if autoPlay requested.
      if (props.autoPlay && el.paused) {
        controls.play();
      }
    }, [props.src]);

    return [element, state, controls, ref] as const;
  };
}

解释

createHTMLMediaHook 是一个高阶函数，用于创建 React 自定义 Hook，简化了对 <audio> 和 <video> 元素的控制。它结合了 React 的状态管理和生命周期钩子来提供一个便捷的接口，用于处理 HTML 媒体元素的播放、暂停、音量控制等操作。以下是对 createHTMLMediaHook 函数的详细解析。

createHTMLMediaHook 函数解析

功能

createHTMLMediaHook 主要用于创建处理 HTML 媒体元素（如 <audio> 和 <video>）的 Hook。这个 Hook 封装了对媒体元素的常见操作和状态管理，提供了一个统一的接口来操作和控制媒体元素。

参数
  • tag:
    • 类型: 'audio' | 'video'
    • 说明: 指定要创建的 HTML 媒体元素类型，可以是 'audio' 或 'video'。
返回值
  • 返回一个函数，该函数接受两种可能的参数：
    • elOrProps:
      • 类型: HTMLMediaProps | React.ReactElement<HTMLMediaProps>
      • 说明: 可以是媒体元素的属性对象，也可以是包含媒体属性的 React 元素。
    • 返回值是一个元组 [element, state, controls, ref]：
      • element: 渲染的 React 元素（<audio> 或 <video>）。
      • state: 当前的媒体状态（HTMLMediaState）。
      • controls: 控制媒体播放的函数（HTMLMediaControls）。
      • ref: 对应媒体元素的 ref。

实现细节

  1. 参数处理

    let element: React.ReactElement<MediaPropsWithRef<T>> | undefined;
let props: MediaPropsWithRef<T>;

if (React.isValidElement(elOrProps)) {
  element = elOrProps;
  props = element.props;
} else {
  props = elOrProps;
}
    • 如果 elOrProps 是一个 React 元素，则提取其属性。
    • 否则，elOrProps 被认为是直接的媒体属性。

  2. 状态和引用

    const [state, setState] = useSetState<HTMLMediaState>({
  buffered: [],
  time: 0,
  duration: 0,
  paused: true,
  muted: false,
  volume: 1,
  playing: false,
});
const ref = useRef<T | null>(null);

  3. 事件处理

    const wrapEvent = (userEvent, proxyEvent?) => {
  return (event) => {
    try {
      proxyEvent && proxyEvent(event);
    } finally {
      userEvent && userEvent(event);
    }
  };
};

    • wrapEvent 用于将用户提供的事件处理函数和内部事件处理函数组合在一起。

    • 内部事件处理函数（如 onPlay、onPause 等）更新状态以反映媒体元素的当前状态。

  4. 创建和渲染媒体元素

    if (element) {
  element = React.cloneElement(element, {
    controls: false,
    ...props,
    ref,
    onPlay: wrapEvent(props.onPlay, onPlay),
    onPlaying: wrapEvent(props.onPlaying, onPlaying),
    onWaiting: wrapEvent(props.onWaiting, onWaiting),
    onPause: wrapEvent(props.onPause, onPause),
    onVolumeChange: wrapEvent(props.onVolumeChange, onVolumeChange),
    onDurationChange: wrapEvent(props.onDurationChange, onDurationChange),
    onTimeUpdate: wrapEvent(props.onTimeUpdate, onTimeUpdate),
    onProgress: wrapEvent(props.onProgress, onProgress),
  });
} else {
  element = React.createElement(tag, {
    controls: false,
    ...props,
    ref,
    onPlay: wrapEvent(props.onPlay, onPlay),
    onPlaying: wrapEvent(props.onPlaying, onPlaying),
    onWaiting: wrapEvent(props.onWaiting, onWaiting),
    onPause: wrapEvent(props.onPause, onPause),
    onVolumeChange: wrapEvent(props.onVolumeChange, onVolumeChange),
    onDurationChange: wrapEvent(props.onDurationChange, onDurationChange),
    onTimeUpdate: wrapEvent(props.onTimeUpdate, onTimeUpdate),
    onProgress: wrapEvent(props.onProgress, onProgress),
  } as any); // TODO: fix this typing.
}
    • 如果提供了元素，则克隆并扩展其属性。
    • 如果没有提供元素，则创建新的媒体元素。

  5. 控制方法

    const controls = {
  play: () => { /* ... */ },
  pause: () => { /* ... */ },
  seek: (time: number) => { /* ... */ },
  volume: (volume: number) => { /* ... */ },
  mute: () => { /* ... */ },
  unmute: () => { /* ... */ },
};
    • controls 对象提供了对媒体元素进行播放、暂停、音量调整等操作的方法。
    • play 和 pause 方法处理 Promise，确保不会重复调用 play 方法。
    • seek 方法调整播放时间。
    • volume、mute 和 unmute 方法调整音量和静音状态。

  6. 副作用

    useEffect(() => {
  const el = ref.current!;
  if (!el) {
    // Handle error
    return;
  }

  setState({
    volume: el.volume,
    muted: el.muted,
    paused: el.paused,
  });

  if (props.autoPlay && el.paused) {
    controls.play();
  }
}, [props.src]);
    • 在组件挂载时，设置初始状态并根据 props.autoPlay 自动播放媒体。

总结

  • createHTMLMediaHook: 用于创建一个自定义 Hook 来处理 <audio> 或 <video> 元素，封装了媒体元素的控制和状态管理。
  • 事件处理: 内部事件处理函数更新 Hook 状态，以反映媒体元素的当前状态。
  • controls: 提供了用于播放、暂停、调整音量等功能的方法。
  • 副作用: 通过 useEffect 确保在媒体源更改时更新状态，并根据 autoPlay 属性自动播放。

这个 Hook 提供了一个简洁的 API 来处理媒体元素的常见操作，使得在 React 组件中操作音视频元素变得更加方便和一致。

@PHARAOH
关注
  • 11
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WHAT - 通过 react-use 源码学习 React（Lifecycles 篇）
weixin_58540586的博客
08-27 952
react-use 是一个流行的 React 自定义 Hook 库，提供了一组常用的 Hook，以帮助开发者在 React 应用程序中更方便地处理常见的任务和功能。官方将react-use的 Hook 分成了以下几个主要类别，以便更好地组织和查找常用的功能。每个类别涵盖了不同类型的 Hook，满足各种开发需求。
WHAT - 通过 react-use 源码学习 React（State 篇）
最新发布
weixin_58540586的博客
08-28 315
Github 地址react-use 是一个流行的 React 自定义 Hook 库，提供了一组常用的 Hook，以帮助开发者在 React 应用程序中更方便地处理常见的任务和功能。官方将react-use的 Hook 分成了以下几个主要类别，以便更好地组织和查找常用的功能。每个类别涵盖了不同类型的 Hook，满足各种开发需求。
WHAT - 通过 shadcn 组件源码学习 React
weixin_58540586的博客
07-22 949
variant: {},size: {},},},},: 使用cva函数定义了按钮的样式变体。这个对象包含了两个主要部分：variants: 定义了不同的变体选项，如variant和size，每个选项又包含不同的具体样式。: 定义了默认的变体值。当然，让我们逐一解释variants对象中的每个属性及其对应的CSS属性值。这些variants属性提供了丰富的样式变体，使得按钮组件可以根据不同的需求应用不同的外观和尺寸，通过简单的属性传递实现了多样化的视觉效果。asChild?
WHAT - React 学习系列（四） - Describing the UI
weixin_58540586的博客
06-19 995
React 与 User Interface。
WHAT - React 学习系列（二）- 框架对比
weixin_58540586的博客
06-13 1470
这一篇主要介绍React在线编码和框架。
WHAT - React 学习系列（七）- Escape hatches
weixin_58540586的博客
06-19 1147
React's escape hatches.
WHAT - React 学习系列（一）
weixin_58540586的博客
06-13 1293
如何由浅入深学习React？
WHAT - React 学习系列（六）- Managing state
weixin_58540586的博客
06-19 1000
React and Managing state.
WHAT - React 学习系列（五）- Adding Interactivity
weixin_58540586的博客
06-19 264
React's Interactivity.
Hands-On Full Stack Development with Spring Boot 2.0 and React
05-24
Use React for frontend programming Learn to create unit tests using JUnit Discover techniques to secure the backend using Spring Security Employ Material-UI in the user interface to make it more user ...
2021-最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)---React篇
m0_59529616的博客
08-03 898
★★★ React 事件绑定原理 ★★★ React中的 setState 缺点是什么呢 ★★★ React组件通信如何实现 ★★★ 类组件和函数组件的区别 ★★★ 请你说说React的路由是什么？ ★★★★★ React有哪些性能优化的手段？ ★★★★ React hooks 用过吗，为什么要用？ ★★★★ 虚拟DOM的优劣如何？实现原理？ ★★★★ React 和 Vue 的 diff 时间复杂度从 O(n^3) 优化到 O(n) ，那么 O(n^3) 和 O(n) 是如何计算出来的？
React Hooks 源码学习
发果叁
08-12 412
React Hooks 添加于 React 16.8，用于 React 中函数组件的一类特殊函数，它们允许你在不编写类组件而是使用简单的函数组件（Function Component，以下称FC）的情况下依然享受到状态、上下文、副作用等 React 特性。自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook。// 下面自定义了一个获取窗口长宽值的hooks}...
React项目案例-影视资源网站
前端高薪进击手记
03-15 789
项目地址：https://github.com/denghuiquan/aimovie
material-ui_Material-UI：如何实现暗模式和编辑主题颜色
weixin_26732881的博客
08-03 1885
material-uiMaterial-UI is a React component library made to follow Google’s Material Design guidelines. As such, it offers a clean UI experience that is both accessible and cross-browser compatible. B...
vue ref和reactive区别
灰海
08-25 589
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
react 路由创建与使用
weixin_45561719的博客
08-23 399
2，路由组件 createBrowserRouter。
React 入门第七天：探索状态管理与Context API
Caleb的博客
08-27 158
在React学习的第七天，我深入了解了React的状态管理机制，特别是如何通过来实现跨组件的状态共享。React的状态管理是组件交互的核心，而则为全局状态的共享提供了一个简洁而强大的解决方案。
React 入门第一天：从Vue到React的初体验
Caleb的博客
08-21 629
作为一名合格的前端工程师，怎么能只会Vue呢？学习React不仅是一场新技术的探索，更是对前端开发思维的一次重新审视。在这里，我将分享学习React的心得，希望能帮助那些和我一样从Vue转向React的开发者。
codepen-clone-react 源码
07-27
codepen-clone-react 是一个用 React 框架开发的类似 CodePen 的代码编辑和运行环境的克隆项目。 该项目的源码主要分为几个部分： 首先，项目的文件结构包含了一些主要的文件和文件夹。其中，src 文件夹是我们主要关注的部分，它包含了所有的 React 组件、样式文件以及其他必要的文件。这些组件的文件结构和组织方式遵循了 React 的最佳实践，易于维护和扩展。 其次，该项目的主要功能是提供一个用户友好的代码编辑器界面，使用户能够输入、编辑和运行他们的代码。它具有语法高亮功能，可以根据代码语言自动应用不同的颜色。此外，它还具有代码自动补全、格式化代码和代码错误检查等功能，提供了一个愉快的编码体验。 代码编辑器的核心是基于 CodeMirror 组件实现的。它使用 React 组件进行封装，并通过使用状态管理库如 Redux 来处理用户输入的代码内容。这样用户可以实时编辑和运行他们的代码，而无需刷新页面。 最后，该项目还提供了一个运行结果的输出窗口，用户可以看到他们的代码在浏览器中实际运行的效果。它使用 iframe 标签作为代码运行的容器，并将用户的代码嵌入到 iframe 中执行。 总结来说，codepen-clone-react 的源码是一个使用 React 框架开发的类似 CodePen 的项目。它提供了一个用户友好的代码编辑和运行环境，实现了代码高亮、自动补全、格式化等功能，并通过 iframe 显示代码运行结果。该项目的源码结构清晰，易于维护和扩展，是一个学习 React 和代码编辑器开发的好例子。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值