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

一、官方介绍

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.
  利用

1. import {useAudio} from 'react-use';
3. const Demo = () => {
4.   const [audio, state, controls, ref] = useAudio({
5.     src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',
6.     autoPlay: true,
7.   });
9.   return (
10.     <div>
11.       {audio}
12.       <pre>{JSON.stringify(state, null, 2)}</pre>
13.       <button onClick={controls.pause}>Pause</button>
14.       <button onClick={controls.play}>Play</button>
15.       <br/>
16.       <button onClick={controls.mute}>Mute</button>
17.       <button onClick={controls.unmute}>Un-mute</button>
18.       <br/>
19.       <button onClick={() => controls.volume(.1)}>Volume: 10%</button>
20.       <button onClick={() => controls.volume(.5)}>Volume: 50%</button>
21.       <button onClick={() => controls.volume(1)}>Volume: 100%</button>
22.       <br/>
23.       <button onClick={() => controls.seek(state.time - 5)}>-5 sec</button>
24.       <button onClick={() => controls.seek(state.time + 5)}>+5 sec</button>
25.     </div>
26.   );
27. };

复制代码

源码

1. import createHTMLMediaHook from './factory/createHTMLMediaHook';
3. const useAudio = createHTMLMediaHook<HTMLAudioElement>('audio');
4. export default useAudio;

复制代码

1. //./factory/createHTMLMediaHook
2. import * as React from 'react';
3. import { useEffect, useRef } from 'react';
4. import useSetState from '../useSetState';
5. import parseTimeRanges from '../misc/parseTimeRanges';
7. export interface HTMLMediaProps
8.   extends React.AudioHTMLAttributes<any>,
9.     React.VideoHTMLAttributes<any> {
10.   src: string;
11. }
13. export interface HTMLMediaState {
14.   buffered: any[];
15.   duration: number;
16.   paused: boolean;
17.   muted: boolean;
18.   time: number;
19.   volume: number;
20.   playing: boolean;
21. }
23. export interface HTMLMediaControls {
24.   play: () => Promise<void> | void;
25.   pause: () => void;
26.   mute: () => void;
27.   unmute: () => void;
28.   volume: (volume: number) => void;
29.   seek: (time: number) => void;
30. }
32. type MediaPropsWithRef<T> = HTMLMediaProps & { ref?: React.MutableRefObject<T | null> };
34. export default function createHTMLMediaHook<T extends HTMLAudioElement | HTMLVideoElement>(
35.   tag: 'audio' | 'video'
36. ) {
37.   return (elOrProps: HTMLMediaProps | React.ReactElement<HTMLMediaProps>) => {
38.     let element: React.ReactElement<MediaPropsWithRef<T>> | undefined;
39.     let props: MediaPropsWithRef<T>;
41.     if (React.isValidElement(elOrProps)) {
42.       element = elOrProps;
43.       props = element.props;
44.     } else {
45.       props = elOrProps;
46.     }
48.     const [state, setState] = useSetState<HTMLMediaState>({
49.       buffered: [],
50.       time: 0,
51.       duration: 0,
52.       paused: true,
53.       muted: false,
54.       volume: 1,
55.       playing: false,
56.     });
57.     const ref = useRef<T | null>(null);
59.     const wrapEvent = (userEvent, proxyEvent?) => {
60.       return (event) => {
61.         try {
62.           proxyEvent && proxyEvent(event);
63.         } finally {
64.           userEvent && userEvent(event);
65.         }
66.       };
67.     };
69.     const onPlay = () => setState({ paused: false });
70.     const onPlaying = () => setState({ playing: true });
71.     const onWaiting = () => setState({ playing: false });
72.     const onPause = () => setState({ paused: true, playing: false });
73.     const onVolumeChange = () => {
74.       const el = ref.current;
75.       if (!el) {
76.         return;
77.       }
78.       setState({
79.         muted: el.muted,
80.         volume: el.volume,
81.       });
82.     };
83.     const onDurationChange = () => {
84.       const el = ref.current;
85.       if (!el) {
86.         return;
87.       }
88.       const { duration, buffered } = el;
89.       setState({
90.         duration,
91.         buffered: parseTimeRanges(buffered),
92.       });
93.     };
94.     const onTimeUpdate = () => {
95.       const el = ref.current;
96.       if (!el) {
97.         return;
98.       }
99.       setState({ time: el.currentTime });
100.     };
101.     const onProgress = () => {
102.       const el = ref.current;
103.       if (!el) {
104.         return;
105.       }
106.       setState({ buffered: parseTimeRanges(el.buffered) });
107.     };
109.     if (element) {
110.       element = React.cloneElement(element, {
111.         controls: false,
112.         ...props,
113.         ref,
114.         onPlay: wrapEvent(props.onPlay, onPlay),
115.         onPlaying: wrapEvent(props.onPlaying, onPlaying),
116.         onWaiting: wrapEvent(props.onWaiting, onWaiting),
117.         onPause: wrapEvent(props.onPause, onPause),
118.         onVolumeChange: wrapEvent(props.onVolumeChange, onVolumeChange),
119.         onDurationChange: wrapEvent(props.onDurationChange, onDurationChange),
120.         onTimeUpdate: wrapEvent(props.onTimeUpdate, onTimeUpdate),
121.         onProgress: wrapEvent(props.onProgress, onProgress),
122.       });
123.     } else {
124.       element = React.createElement(tag, {
125.         controls: false,
126.         ...props,
127.         ref,
128.         onPlay: wrapEvent(props.onPlay, onPlay),
129.         onPlaying: wrapEvent(props.onPlaying, onPlaying),
130.         onWaiting: wrapEvent(props.onWaiting, onWaiting),
131.         onPause: wrapEvent(props.onPause, onPause),
132.         onVolumeChange: wrapEvent(props.onVolumeChange, onVolumeChange),
133.         onDurationChange: wrapEvent(props.onDurationChange, onDurationChange),
134.         onTimeUpdate: wrapEvent(props.onTimeUpdate, onTimeUpdate),
135.         onProgress: wrapEvent(props.onProgress, onProgress),
136.       } as any); // TODO: fix this typing.
137.     }
139.     // Some browsers return `Promise` on `.play()` and may throw errors
140.     // if one tries to execute another `.play()` or `.pause()` while that
141.     // promise is resolving. So we prevent that with this lock.
142.     // See: https://bugs.chromium.org/p/chromium/issues/detail?id=593273
143.     let lockPlay: boolean = false;
145.     const controls = {
146.       play: () => {
147.         const el = ref.current;
148.         if (!el) {
149.           return undefined;
150.         }
152.         if (!lockPlay) {
153.           const promise = el.play();
154.           const isPromise = typeof promise === 'object';
156.           if (isPromise) {
157.             lockPlay = true;
158.             const resetLock = () => {
159.               lockPlay = false;
160.             };
161.             promise.then(resetLock, resetLock);
162.           }
164.           return promise;
165.         }
166.         return undefined;
167.       },
168.       pause: () => {
169.         const el = ref.current;
170.         if (el && !lockPlay) {
171.           return el.pause();
172.         }
173.       },
174.       seek: (time: number) => {
175.         const el = ref.current;
176.         if (!el || state.duration === undefined) {
177.           return;
178.         }
179.         time = Math.min(state.duration, Math.max(0, time));
180.         el.currentTime = time;
181.       },
182.       volume: (volume: number) => {
183.         const el = ref.current;
184.         if (!el) {
185.           return;
186.         }
187.         volume = Math.min(1, Math.max(0, volume));
188.         el.volume = volume;
189.         setState({ volume });
190.       },
191.       mute: () => {
192.         const el = ref.current;
193.         if (!el) {
194.           return;
195.         }
196.         el.muted = true;
197.       },
198.       unmute: () => {
199.         const el = ref.current;
200.         if (!el) {
201.           return;
202.         }
203.         el.muted = false;
204.       },
205.     };
207.     useEffect(() => {
208.       const el = ref.current!;
210.       if (!el) {
211.         if (process.env.NODE_ENV !== 'production') {
212.           if (tag === 'audio') {
213.             console.error(
214.               'useAudio() ref to <audio> element is empty at mount. ' +
215.                 'It seem you have not rendered the audio element, which it ' +
216.                 'returns as the first argument const [audio] = useAudio(...).'
217.             );
218.           } else if (tag === 'video') {
219.             console.error(
220.               'useVideo() ref to <video> element is empty at mount. ' +
221.                 'It seem you have not rendered the video element, which it ' +
222.                 'returns as the first argument const [video] = useVideo(...).'
223.             );
224.           }
225.         }
226.         return;
227.       }
229.       setState({
230.         volume: el.volume,
231.         muted: el.muted,
232.         paused: el.paused,
233.       });
235.       // Start media, if autoPlay requested.
236.       if (props.autoPlay && el.paused) {
237.         controls.play();
238.       }
239.     }, [props.src]);
241.     return [element, state, controls, ref] as const;
242.   };
243. }

复制代码

解释
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;
  2. let props: MediaPropsWithRef<T>;
  4. if (React.isValidElement(elOrProps)) {
  5.   element = elOrProps;
  6.   props = element.props;
  7. } else {
  8.   props = elOrProps;
  9. }

  复制代码
  
  
  • 假如 elOrProps 是一个 React 元素，则提取其属性。
    
  • 否则，elOrProps 被认为是直接的媒体属性。
    
  
  
• 状态和引用
  
  1. const [state, setState] = useSetState<HTMLMediaState>({
  2.   buffered: [],
  3.   time: 0,
  4.   duration: 0,
  5.   paused: true,
  6.   muted: false,
  7.   volume: 1,
  8.   playing: false,
  9. });
  10. const ref = useRef<T | null>(null);

  复制代码
  
  
  • 利用 useSetState 管理媒体状态。有关 useSetState 详细解释可以阅读 WHAT - 通过 react-use 源码学习 React（State 篇）
    
  • ref 是一个 useRef，用于引用实际的媒体元素。
    
  
  
• 变乱处置惩罚
  
  1. const wrapEvent = (userEvent, proxyEvent?) => {
  2.   return (event) => {
  3.     try {
  4.       proxyEvent && proxyEvent(event);
  5.     } finally {
  6.       userEvent && userEvent(event);
  7.     }
  8.   };
  9. };

  复制代码
  
  
  • wrapEvent 用于将用户提供的变乱处置惩罚函数和内部变乱处置惩罚函数组合在一起。
    
  • 内部变乱处置惩罚函数（如 onPlay、onPause 等）更新状态以反映媒体元素的当前状态。
    
  
  
• 创建和渲染媒体元素
  
  1. if (element) {
  2.   element = React.cloneElement(element, {
  3.     controls: false,
  4.     ...props,
  5.     ref,
  6.     onPlay: wrapEvent(props.onPlay, onPlay),
  7.     onPlaying: wrapEvent(props.onPlaying, onPlaying),
  8.     onWaiting: wrapEvent(props.onWaiting, onWaiting),
  9.     onPause: wrapEvent(props.onPause, onPause),
  10.     onVolumeChange: wrapEvent(props.onVolumeChange, onVolumeChange),
  11.     onDurationChange: wrapEvent(props.onDurationChange, onDurationChange),
  12.     onTimeUpdate: wrapEvent(props.onTimeUpdate, onTimeUpdate),
  13.     onProgress: wrapEvent(props.onProgress, onProgress),
  14.   });
  15. } else {
  16.   element = React.createElement(tag, {
  17.     controls: false,
  18.     ...props,
  19.     ref,
  20.     onPlay: wrapEvent(props.onPlay, onPlay),
  21.     onPlaying: wrapEvent(props.onPlaying, onPlaying),
  22.     onWaiting: wrapEvent(props.onWaiting, onWaiting),
  23.     onPause: wrapEvent(props.onPause, onPause),
  24.     onVolumeChange: wrapEvent(props.onVolumeChange, onVolumeChange),
  25.     onDurationChange: wrapEvent(props.onDurationChange, onDurationChange),
  26.     onTimeUpdate: wrapEvent(props.onTimeUpdate, onTimeUpdate),
  27.     onProgress: wrapEvent(props.onProgress, onProgress),
  28.   } as any); // TODO: fix this typing.
  29. }

  复制代码
  
  
  • 假如提供了元素，则克隆并扩展其属性。
    
  • 假如没有提供元素，则创建新的媒体元素。
    
  
  
• 控制方法
  
  1. const controls = {
  2.   play: () => { /* ... */ },
  3.   pause: () => { /* ... */ },
  4.   seek: (time: number) => { /* ... */ },
  5.   volume: (volume: number) => { /* ... */ },
  6.   mute: () => { /* ... */ },
  7.   unmute: () => { /* ... */ },
  8. };

  复制代码
  
  
  • controls 对象提供了对媒体元素进行播放、停息、音量调整等操作的方法。
    
  • play 和 pause 方法处置惩罚 Promise，确保不会重复调用 play 方法。
    
  • seek 方法调整播放时间。
    
  • volume、mute 和 unmute 方法调整音量和静音状态。
    
  
  
• 副作用
  
  1. useEffect(() => {
  2.   const el = ref.current!;
  3.   if (!el) {
  4.     // Handle error
  5.     return;
  6.   }
  8.   setState({
  9.     volume: el.volume,
  10.     muted: el.muted,
  11.     paused: el.paused,
  12.   });
  14.   if (props.autoPlay && el.paused) {
  15.     controls.play();
  16.   }
  17. }, [props.src]);

  复制代码
  
  
  • 在组件挂载时，设置初始状态并根据 props.autoPlay 主动播放媒体。
    
  
  

总结

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

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。