为什么使用效果钩子没有按预期工作？

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调用状态更新，但它不会导致循环，因为您将设置相同的值来更新状态，因此不会发生无限循环