React中“removeEventListener无效”与状态数组新增数据时产生死循环的问题

一、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]]
        })
    },[])