Question

我从没在React中使用钩子，而是尝试使用useEffect()，但是我似乎并没有了解其正确结构和使用的基础。

我可以使用普通的JavaScript来获得结果，但是使用useState时，状态保持不变。

然后搜索了一段时间后我发现useEffect，这就是我想要的样子-

// Background Parallax Effect

let [translateY,setTranslateY] = useState(0);
useEffect(()=> {
    const getScrollPos = ()=> {
        setTranslateY(window.scrollY*(-.2));

        requestAnimationFrame(getScrollPos);
    }

    document.addEventListener("DOMContentLoaded",getScrollPos)
},[translateY]);

我高度怀疑其结构与预期的结构不同。

所以我想知道修复程序和其工作原理，以帮助更好地理解结构。

Answer 1

第一个代码的问题是您添加了translateY作为useEffect的依赖项。。您应该删除translateY作为依赖项，并在卸载组件时也删除事件侦听器。另外，在getScrollPos函数中有一个requestAnimationCallback，它会无条件触发，从而导致无限循环

useEffect(()=> {
    const getScrollPos = ()=> {
        setTranslateY(window.scrollY*(-.2));
    }
    const setScrollPos = () => {
       requestAnimationFrame(getScrollPos);
    }

    document.addEventListener("DOMContentLoaded",setScrollPos);

    return () => {
        document.removeEventListener("DOMContentLoaded",setScrollPos)
    }
},[]);

请注意，如果使用相同的值更新状态，则react会阻止重新渲染。

在第二个代码中，尽管您直接在render函数中使用listenScroll来调用状态更新，但它不会引起循环，因为您将设置相同的值来更新状态，因此无限循环不会不会发生

为什么useEffect挂钩不能按预期工作？

1 个答案: