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

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) {