useEffect 和 useLayoutEffect淺析

• 2022 年 10 月 7 日
• 筆記
• react技術棧

執行時期的區別

useEffect 回調函數的執行時期

useEffect為非同步執行，執行時期為

• 觸髮狀態更新（如：setState，forceUpdate）
• React渲染函數執行（render）
• 將更新渲染到頁面上
• 執行useEffect回調函數

useLayoutEffect 回調函數的執行時期

• 觸發更新
• React渲染函數執行
• 同步執行 useLayoutEffect回調函數 (如果此函數中存在 觸發更新操作，如setState，會放棄本階段的頁面渲染，先執行更新然後再統一進行渲染)
• 將更新渲染到頁面上

對比後得到兩者區別

• 執行時期的區別，useEffect回調是在更新渲染到頁面以後非同步執行 而 useLayoutEffect是在更新渲染在頁面前同步執行。造成的影響是，useLayoutEffect 回調中如果有耗時操作會阻塞頁面的渲染，造成性能問題。

• 兩者中如果調用setState更新狀態，都會再次執行render，區別是 useEffect會進行兩次頁面更新渲染，useLayoutEffect只會執行最後一次頁面更新渲染。所以，看到的結果是使用useEffect時候執行更新頁面上會出現閃爍，而useLayoutEffect確不會

• useLayoutEffect 的執行時期 同 class組件生命周期 componentDidMount 和 componentDidUpdate

所以，得出的結論是，大多數的場景中都應該使用useEffect來實現我們的邏輯，僅僅在一些特殊情況，比如需要去監聽同步更新狀態防止頁面煽動時才需要useLayoutEffect。