UseEffect 如何跳過初始渲染並僅在任何依賴項變更後觸發

希望你做得很好，我看到你對 useEffect 位有點沮喪，但別擔心，讓我們一起修復它並解決問題。

為什麼 Heppen ：我的兄弟 useEffect 他非常簡單：只要依賴數組中的任何值發生變化，它就會在 JSX 之後運行。但有時即使依賴數組中的資料沒有改變， useEffect 也會觸發。這是由於初始渲染而發生的。

解決方案：我的方法可能與你的不同，如果我犯了任何錯誤，請告訴我，這可行，所以讓我們深入了解

第 1 步： 在我的例子中建立 2 個 userref，其元件A.tsx
我們將使用兩個引用來控制初始渲染行為：

const SkippedInitialRender = useRef(false);
const wasInitialRender = useRef(false);

第 2 步： 建立 useEffect

useEffect(() => {
        if(skippedInitialRender.current) {
            // After the first render, the value changes and this block will run
        }
        const currentTimeout = setTimeout(() => {
            wasInitialRender.current = true;
            skippedInitialRender.current = true;
        }, 200);
        return () => clearTimeout(currentTimeout);
    }, [value])

*第 3 步：* 在 if 語句中運行邏輯並完成

*說明：*在初始渲染期間，我們使用 setTimeout 延遲執行。這確保了無論 useEffect 在初始渲染期間觸發多少次（2、4 或更多），我們的邏輯都不會運行。此邏輯僅在初始渲染後依賴值再次變更時運行。

以上是UseEffect 如何跳過初始渲染並僅在任何依賴項變更後觸發的詳細內容。更多資訊請關注PHP中文網其他相關文章！