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

淡淡的烟草味﹌ 2023-09-26 23:53 108阅读 0赞

首先感谢大家对第一部分的支持。在本文中，我提出了另外 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挂钩用于使用提供的初始值初始化状态，并使用对初始值调用的验证函数的结果来初始化验证状态。