如何防止`useEffect`在React中的初始渲染上運作？

防止useEffect 在初始渲染上運行

React 的useEffect() 鉤子模仿了componentDidUpdate() 渲染的行為，包括每次後渲染了componentDidUpdate() 渲染的行為，包括每次渲染後的調用。然而，與 componentDidUpdate() 不同的是，useEffect() 即使在初始渲染時也會運行。本文解決如何修正此問題並防止 useEffect() 在初始渲染階段執行。

使用 useRef Hook

來確定 useEffect() 是否為第一次運行，使用 useRef() 鉤子。 useRef() 儲存可變值。在這種情況下，它可以追蹤是否是初始渲染。

使用 useLayoutEffect

如果效果應該與 componentDidUpdate() 在同一階段發生，請考慮使用 useLayoutEffect ()取代useEffect().

範例

以下程式碼示範如何使用 useRef() 阻止 useEffect() 在初始渲染上運作：

在此程式碼中：

1. 我們定義一個元件函數，使用useState() 管理計數狀態，useRef() 鉤子追蹤第一次更新。
2. 我們利用 useLayoutEffect() 在與 componentDidUpdate() 相同的階段運作效果。
3. 在效果內部，我們檢查這是否是第一次更新（firstUpdate.current 為 true）。如果是這樣，我們將firstUpdate.current設為false並提前返回以防止效果運行。

當您執行此程式碼時，您會注意到「componentDidUpdateFunction」僅在初始渲染後記錄按一下按鈕時，模仿 componentDidUpdate() 的行為。

以上是如何防止`useEffect`在React中的初始渲染上運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！