用法

useLayoutEffect 和 useEffect 的使用方式很相似：

1. useLayoutEffect 接收一個函數和一個依賴項數組作為參數
2. 只有在數組中的依賴項發生改變時才會再次執行副作用函數
3. useLayoutEffect 也可以返回一個清理函數

useEffect(()=>{return () => {}
}, 依賴項數組)

區別

hooks名稱	執行時機	執行過程
useEffect	在瀏覽器重新繪制屏幕 之后 觸發	異步 執行，不阻塞瀏覽器繪制
useLayoutEffect	在瀏覽器重新繪制屏幕 之前 觸發	同步 執行，阻塞瀏覽器重新繪制

export const RandomNumber: React.FC = () => {const [num, setNum] = useState(Math.random() * 200)useEffect(() => {if (num === 0) {setNum(10 + Math.random() * 200)}}, [num])return (<><h1>num 的值是：{num}</h1><button onClick={() => setNum(0)}>重置 num</button></>)
}

將useEffect改成useLayoutEffect后數字不再閃爍
因為點擊按鈕時，num 更新為 0，但此時頁面不會渲染，而是等待 useLayoutEffect 內部狀態修改后才會更新頁面，所以不會出現閃爍

export const RandomNumber: React.FC = () => {const [num, setNum] = useState(Math.random() * 200)useLayoutEffect(() => {if (num === 0) {setNum(10 + Math.random() * 200)}}, [num])return (<><h1>num 的值是：{num}</h1><button onClick={() => setNum(0)}>重置 num</button></>)
}