為什么 useEffect 掛鈎不能按預期工作？

Question

我從未在 React 中使用過鈎子，我正在嘗試使用useEffect()但我似乎沒有了解其正確結構和使用的基礎知識。

我能夠使用普通的 JavaScript 實現結果，但使用useState時 state 保持不變。

然后我在搜索了一段時間后找到了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 function 中有一個requestAnimationCallback ，無條件觸發導致無限循環

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

    document.addEventListener("DOMContentLoaded",setScrollPos);

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

請注意，如果您使用相同的值更新 state，react 會阻止重新渲染。

在第二個代碼中，盡管您通過在渲染 function 中直接使用listenScroll調用 state 更新，但它不會導致循環，因為您將設置相同的值來更新 Z9ED39E2EA931586B6A985A6942EF5，因此不會發生無限循環