为什么 useEffect 钩子没有按预期工作？

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 会阻止重新渲染。

在第二个代码中，虽然您直接在渲染函数中使用 listenScroll 调用状态更新，但它不会导致循环，因为您将设置相同的值来更新状态，因此无限没有出现循环

为什么 useEffect 钩子没有按预期工作？

Why doesn't useEffect hook work as expected?

javascript

reactjs

react-hooks

use-effect