15 个有用的 React 自定义钩子，你可以在任何项目中使用

痛定思痛。 2023-09-26 23:53 110阅读 0赞

React 自定义挂钩允许在功能组件中使用可重用的逻辑，从而可以分离组件并保持部件较小并专注于它们的预期目的。自定义挂钩还可以更轻松地测试和理解组件的逻辑，因为它可以与组件本身隔离和单独测试。自定义钩子还可以让不同组件之间的共享逻辑变得更容易，减少代码重复，更容易维护和更新代码库。

React hooks 有无限的可能性，但并不是所有的都生而平等。在本文中，我将介绍 30 个强大的自定义挂钩，您可以在任何项目中使用它们，而且实施起来也超级快。

注意：Youtuber Web Dev Simplified创建了这些挂钩。如果你想要深入的视频解释，你可以查看他的视频。但是，如果您只是阅读它们，请继续。

使用切换  
使用超时  
使用去抖动  
使用更新效果  
使用数组  
使用上一个  
使用StateWithHistory  
使用存储  
使用异步  
使用Fetch  
使用脚本  
使用DeepCompareEffect  
使用事件监听器  
使用OnScreen  
使用窗口大小  
1.使用切换  
import \{ useState \} from “react”

export default function useToggle(defaultValue) \{  
const \[value, setValue\] = useState(defaultValue)

function toggleValue(value) \{  
setValue(currentValue =>  
typeof value === “boolean” ? value : !currentValue  
)  
\}

return \[value, toggleValue\]  
\}  
useToggle是一个自定义的 React 钩子，它允许组件在 true 和 false 之间切换值。它使用useState钩子来管理它的状态。首先，钩子接受一个defaultValue参数来初始化值状态。然后，它返回一个包含两个元素的数组：当前值和一个用于toggleValue在 true 和 false 之间切换值的函数。该函数接受一个参数。如果参数是布尔值，它将值设置为参数。否则，它会切换当前值。

以下是如何使用此挂钩的示例：  
import useToggle from “./useToggle”

export default function ToggleComponent() \{  
const \[value, toggleValue\] = useToggle(false)

return (

\{value.toString()\}

Toggle  
<button onClick=\{() => toggleValue(true)\}>Make True  
<button onClick=\{() => toggleValue(false)\}>Make False

)  
\}  
2.使用超时  
import \{ useCallback, useEffect, useRef \} from “react”

export default function useTimeout(callback, delay) \{  
const callbackRef = useRef(callback)  
const timeoutRef = useRef()

useEffect(() => \{  
callbackRef.current = callback  
\}, \[callback\])

const set = useCallback(() => \{  
timeoutRef.current = setTimeout(() => callbackRef.current(), delay)  
\}, \[delay\])

const clear = useCallback(() => \{  
timeoutRef.current && clearTimeout(timeoutRef.current)  
\}, \[\])

useEffect(() => \{  
set()  
return clear  
\}, \[delay, set, clear\])

const reset = useCallback(() => \{  
clear()  
set()  
\}, \[clear, set\])

return \{ reset, clear \}  
\}  
useTimeout是一个自定义的 React 挂钩，它允许组件set超时clear。它使用ReactuseCallback库中的、useEffect和useRef钩子。该钩子有两个参数：一个回调，将在指定的延迟后调用，延迟是调用回调之前应该经过的时间（以毫秒为单位）。

该挂钩返回一个具有两个属性的对象：reset和clear，可用于重置或清除超时的函数。

钩子使用useRef钩子创建两个引用：callbackRef和timeoutRef。将回调函数作为可变值保存，并callbackRef包含setTimeout()函数返回的超时ID。timeoutRef

useEffect 钩子用于确保callbackRef.current始终传递最新的回调。  
该函数使用setTimeoutset创建一个新的超时，在指定的延迟后调用回调函数。clear函数使用clearTimeout清除超时。然后还有另一个钩子用于设置挂载超时并在卸载时将其删除。复位函数是和函数的组合。最后，钩子确保函数仅在它们的依赖关系发生变化时才重新创建。useEffectclearsetuseCallback

以下是如何使用此挂钩的示例：  
import \{ useState \} from “react”  
import useTimeout from “./useTimeout”

export default function TimeoutComponent() \{  
const \[count, setCount\] = useState(10)  
const \{ clear, reset \} = useTimeout(() => setCount(0), 1000)

return (

\{count\}

<button onClick=\{() => setCount(c => c + 1)\}>Increment  
Clear Timeout  
Reset Timeout

)  
\}  
这个自定义useTimeout钩子在组件需要充当不可避免的延迟的各种情况下很有用。例如：

一定时间后消失的通知消息  
在重定向之前显示加载微调器一定时间的表单提交  
在一定时间后自动前进到下一张幻灯片的幻灯片  
显示剩余时间并在达到零时触发动作的倒数计时器  
一定时间后保存表单数据的自动保存功能  
在一定数量的不活动后将用户注销的会话超时  
延迟回调执行一定时间的去抖动函数。  
它可以用在任何情况下，你需要在行动之前等待一定的时间，或者多次重复一个动作，并且在它们之间有延迟。

3.使用去抖动  
import \{ useEffect \} from “react”  
import useTimeout from “…/2-useTimeout/useTimeout”

export default function useDebounce(callback, delay, dependencies) \{  
const \{ reset, clear \} = useTimeout(callback, delay)  
useEffect(reset, \[…dependencies, reset\])  
useEffect(clear, \[\])  
\}  
useDebounce是一个自定义的 React 挂钩，它允许组件将回调函数的执行延迟指定的时间量。useEffect它使用来自 React 库的内置钩子和useTimeout（第二个自定义钩子）自定义钩子。

该钩子接受三个参数：

“回调”是应该去抖动的功能。  
“延迟”是在调用回调之前应该经过的时间（以毫秒为单位）。  
“dependencies”是一个值数组，钩子应该监听这些值的变化，并在有任何变化时重新运行回调。  
钩子使用useTimeout钩子创建一个超时，该超时将在指定的延迟后调用回调函数。该useEffect钩子用于设置挂载超时并在卸载时清除超时。第一个useEffect将在任何依赖项更改时调用reset函数，第二个useEffect在组件卸载时调用 clear 函数。

下面是一个如何使用这个钩子的例子：  
import \{ useState \} from “react”  
import useDebounce from “./useDebounce”

export default function DebounceComponent() \{  
const \[count, setCount\] = useState(10)  
useDebounce(() => alert(count), 1000, \[count\])

return (

\{count\}

<button onClick=\{() => setCount(c => c + 1)\}>Increment

)  
\}  
如果您想限制在短时间内调用回调函数的次数，此挂钩会很有用。例如，当您有一个在每次击键时都会向服务器发送搜索请求的输入字段时，您应该等待用户停止输入后再发送请求，以避免不必要的网络流量并改善用户体验。

4.使用更新效果  
import \{ useEffect, useRef \} from “react”

export default function useUpdateEffect(callback, dependencies) \{  
const firstRenderRef = useRef(true)

useEffect(() => \{  
if (firstRenderRef.current) \{  
firstRenderRef.current = false  
return  
\}  
return callback()  
\}, dependencies)  
\}  
useUpdateEffect是一个自定义的 React 钩子，它允许组件仅在特定依赖项发生变化时运行回调函数。它使用 React 库的内置useEffect和useRef钩子。

钩子接受两个参数：

callback是依赖项更改时应调用的函数  
dependencies是一个值数组，钩子应该监听这些值的变化。  
钩子使用useRef钩子创建一个firstRenderRef初始值为true的引用。该引用将用于跟踪组件的第一次渲染。  
useEffect hook 用于监听 dependencies 数组的变化并调用回调函数。在useEffect函数内部，它通过检查值来检查这是否是组件的第一次渲染firstRenderRef。如果是，则将其设置为 false 并返回。如果不是，说明这是一次更新，所以会调用回调函数，返回回调函数。

下面是一个如何使用这个钩子的例子：  
import \{ useState \} from “react”  
import useUpdateEffect from “./useUpdateEffect”

export default function UpdateEffectComponent() \{  
const \[count, setCount\] = useState(10)  
useUpdateEffect(() => alert(count), \[count\])

return (

\{count\}

<button onClick=\{() => setCount(c => c + 1)\}>Increment

)  
\}  
如果您只想在特定值更改时而不是在初始渲染时运行某些逻辑，此挂钩会很有帮助。例如，当您希望在用户从下拉菜单中选择特定选项后从 API 获取数据时，或者当您希望在窗口大小更改后更新元素在屏幕上的位置时。

5.使用数组  
import \{ useState \} from “react”

export default function useArray(defaultValue) \{  
const \[array, setArray\] = useState(defaultValue)

function push(element) \{