一. 报错场景
在react中,使用useEffect监听、清除鼠标事件时出现的警告。代码如下:
import { useEffect, useRef } from 'react'
const homePageRef = useRef<HTMLDivElement | null>(null)
useEffect(() => {
if (navigator.userAgent.indexOf('Firefox') === -1) {
homePageRef.current?.addEventListener(
'mousewheel',
_.debounce(scrollChange, 100, { trailing: false, leading: true }),
true
)
} else {
homePageRef.current?.addEventListener(
'DOMMouseScroll',
_.debounce(scrollChange, 100, { trailing: false, leading: true }),
true
)
}
return () => {
if (navigator.userAgent.indexOf('Firefox') === -1) {
homePageRef.current?.removeEventListener('mousewheel', scrollChange, true)
} else {
homePageRef.current?.removeEventListener('DOMMouseScroll', scrollChange, true)
}
}
}, []) // eslint-disable-line react-hooks/exhaustive-deps
报如下警告:
意思是useEffect在执行清除功能时,homePageRef.current可能发生了改变。如果这个 ref 指向由 React 渲染的节点,将 ‘homePageRef.current’ 在useEffect中赋值给一个变量,在清除函数中使用该变量。
二. 解决如下
修改为如下代码后不再报出警告
import { useEffect, useRef } from 'react'
const homePageRef = useRef<HTMLDivElement | null>(null)
useEffect(() => {
const homePageHTML = homePageRef.current
if (navigator.userAgent.indexOf('Firefox') === -1) {
homePageHTML?.addEventListener(
'mousewheel',
_.debounce(scrollChange, 100, { trailing: false, leading: true }),
true
)
} else {
homePageHTML?.addEventListener(
'DOMMouseScroll',
_.debounce(scrollChange, 100, { trailing: false, leading: true }),
true
)
}
return () => {
if (navigator.userAgent.indexOf('Firefox') === -1) {
homePageHTML?.removeEventListener('mousewheel', scrollChange, true)
} else {
homePageHTML?.removeEventListener('DOMMouseScroll', scrollChange, true)
}
}
}, []) // eslint-disable-line react-hooks/exhaustive-deps
(完)