一、removeEventListenr 无效。
错误场景:
const onBottom = () => {
}, [])
useEffect(() => {
const bg = document.getElementById("bg")
bg?.addEventListener('scroll',onBottom )
return () => {
bg?.removeEventListener('scroll', onBottom )
}
}, [])
错误原因:
重点:“在removeEventListener 中所传递回调函数需要与addEventListener中的保持一致”,而在react中,因为视图更新所产生的更改,导致在return时所传递的函数是最新创建的函数,而不是在addEventListener中所传递的,简单来说就是react的更新机制所导致的引用问题。
解决方法:
const onBottom = useCallback(() => {
}, [])
useEffect(() => {
const bg = document.getElementById("bg")
bg?.addEventListener('scroll',onBottom )
return () => {
bg?.removeEventListener('scroll', onBottom )
}
}, [onBottom])
useCallback 可以保留引用,只有在依赖项发生更改时才会更新状态,此外还可以使用useRef。
二、状态数组新增数据时产生死循环的问题
错误场景:
const [list,setList]= useState<any[]>([])
useEffect(()=>{
setList([...list],...[1,2,3])
},[list])
解决方案:
vue3后遗症<( ̄︶ ̄)>,错的有点傻,如果不加依赖的话,无法获取最新值,添加依赖的话,又会死循环。解决方法为使用回调函数进行传参。
const [list,setList]= useState<any[]>([])
useEffect(()=>{
setList((state:any)=>{
return[...list,...[1,2,3]]
})
},[])