15 个更有用的 React 自定义钩子，适合所有人 - 第 2 部分

首先感谢大家对第一部分的支持。在本文中，我提出了另外 15 个 React 自定义钩子，无论您是在构建小型项目还是大型项目，它们都能对您有所帮助。

注意：我在这里使用了一些自定义挂钩，我在第一部分中对此进行了解释。如果您还没有阅读第一部分，您可能无法理解代码。这就是为什么我建议先阅读第一部分。你可以在这里找到这篇文章：第一部分

目录

使用媒体查询
使用地理位置
使用StateWithValidation
使用尺寸
使用效果一次
使用点击外部
使用深色模式
使用复制到剪贴板
使用Cookie
使用翻译
使用在线状态
使用渲染次数
使用调试信息
使用悬停
使用长按
1.使用MediaQuery
import { useState, useEffect } from “react”
import useEventListener from “…/13-useEventListener/useEventListener”

export default function useMediaQuery(mediaQuery) {
const [isMatch, setIsMatch] = useState(false)
const [mediaQueryList, setMediaQueryList] = useState(null)

useEffect(() => {
const list = window.matchMedia(mediaQuery)
setMediaQueryList(list)
setIsMatch(list.matches)
}, [mediaQuery])

useEventListener(“change”, e => setIsMatch(e.matches), mediaQueryList)

return isMatch
}
useMediaQuery是一个自定义的 React 挂钩，它允许组件检查特定媒体查询是否与当前视口匹配并跟踪匹配状态。此外，它还使用了React 库中的内置hooksuseState和一个自定义的 hook（这个 hook 在第一部分中进行了解释），允许组件向特定的DOM元素添加事件监听器，并在发生时执行回调函数。事件发生。useEffectuseEventListener

钩子接受一个参数：

mediaQuery是一个字符串，表示要检查的媒体查询。
该useEffect挂钩从媒体查询创建一个 MediaQueryList 对象并设置初始匹配状态。
该挂钩向MediaQueryListuseEventListener对象添加一个更改事件侦听器，并在事件发生时更新匹配状态。 它返回一个布尔值，指示媒体查询是否与当前视口匹配。
isMatch

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

export default function MediaQueryComponent() {
const isLarge = useMediaQuery(“(min-width: 200px)”)

return

Large: {isLarge.toString()}

}
如果您想根据当前视口更改组件的布局或行为，例如使布局适应不同的屏幕尺寸或设备类型，此挂钩会很有用。

2.使用地理位置
import { useState, useEffect } from “react”

export default function useGeolocation(options) {
const [loading, setLoading] = useState(true)
const [error, setError] = useState()
const [data, setData] = useState({})

useEffect(() => {
const successHandler = e => {
setLoading(false)
setError(null)
setData(e.coords)
}
const errorHandler = e => {
setError(e)
setLoading(false)
}
navigator.geolocation.getCurrentPosition(
successHandler,
errorHandler,
options
)
const id = navigator.geolocation.watchPosition(
successHandler,
errorHandler,
options
)
return () => navigator.geolocation.clearWatch(id)
}, [options])

return { loading, error, data }
}
useGeolocation是一个自定义的 React Hook，它允许组件访问浏览器的地理定位 API 并跟踪设备的当前位置。它使用 React 库的内置useState和useEffect挂钩。

该钩子带有一个可选参数：options是一个允许您配置地理定位API 的对象，例如缓存位置的最长期限和调用错误回调之前的超时时间。

useEffect挂钩调用地理定位API和和方法。传递给这些方法的回调使用当前位置数据更新状态，并相应地设置加载和错误状态。getCurrentPositionwatchPosition

它返回一个包含三个属性的对象：

loading是一个布尔值，指示当前是否正在获取地理位置数据。

如果在获取地理位置数据时出错，则error是一个错误对象。

data是一个对象，包含设备当前位置的纬度、经度、精度、高度和其他属性。

这是一个如何使用这个钩子的例子：
import useGeolocation from “./useGeolocation”

export default function GeolocationComponent() {
const {
loading,
error,
data: { latitude, longitude },
} = useGeolocation()

return (
<>

Loading: {loading.toString()}

Error: {error?.message}

{latitude} x {longitude}

</>
)
}
此挂钩在您想要访问用户的位置数据的情况下很有用，例如在地图上显示附近的位置或提供基于位置的服务。

3.使用StateWithValidation
import { useState, useCallback } from “react”

export default function useStateWithValidation(validationFunc, initialValue) {
const [state, setState] = useState(initialValue)
const [isValid, setIsValid] = useState(() => validationFunc(state))

const onChange = useCallback(
nextState => {
const value =
typeof nextState === “function” ? nextState(state) : nextState
setState(value)
setIsValid(validationFunc(value))
},
[validationFunc]
)

return [state, onChange, isValid]
}
useStateWithValidation是一个自定义的 React Hook，它允许组件跟踪状态值并在每次更改时验证状态值。它使用 React 库的内置useState和useCallback钩子。

钩子有两个参数：

validationFunc是一个将在每次状态更改时使用新状态值调用的函数。它应该返回一个布尔值，指示状态值是否有效。

initialValue是状态的初始值。

该useState挂钩用于使用提供的初始值初始化状态，并使用对初始值调用的验证函数的结果来初始化验证状态。