useLayoutEffect
useLayoutEffect 用于在瀏覽器重新繪制屏幕之前同步執行代碼。它與 useEffect 相同，但執行時機不同。
主要特點
- 執行時機：
useLayoutEffect在 DOM 更新完成后同步執行，但在瀏覽器繪制之前。這使得它可以在瀏覽器渲染之前讀取和修改 DOM，避免視覺上的閃爍或不一致。 - 適用場景：主要用于需要同步調整布局的副作用操作，例如測量 DOM 元素的尺寸（如高度、寬度、滾動位置等）并根據這些值進行渲染。
- 性能影響：由于
useLayoutEffect阻塞了瀏覽器的繪制，如果執行復雜或耗時的操作，可能會導致性能問題或視覺卡頓。
與 useEffect 的區別
- 執行時間：
useEffect：在瀏覽器繪制之后異步執行。useLayoutEffect：在瀏覽器繪制之前同步執行。
注意事項
useLayoutEffect在服務器端渲染（SSR）中不會執行，因此在 SSR 場景下需要謹慎使用。- 盡量優先使用
useEffect，因為useLayoutEffect可能會影響性能。
總之，useLayoutEffect 是一個強大的工具，但應僅在需要同步處理 DOM 布局時使用。
useEffect
useEffect 可以用來實現類似類組件生命周期方法的功能。通過合理配置 ，可以模擬類組件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 等生命周期方法。
總結
但需要注意的是，useEffect 的執行時機是異步的，如果需要在瀏覽器繪制之前同步操作 DOM，可以使用 useLayoutEffect。
useCallback和useMemo的區別
1. useMemo
useMemo 用于緩存計算結果，避免在組件重新渲染時重復執行復雜的計算邏輯。
特點
- 用途：緩存計算結果。
2. useCallback
useCallback 用于緩存函數，避免在組件重新渲染時創建新的函數引用。
特點
- 用途：緩存函數引用。
- 執行時機：每次組件渲染時都會執行，但如果依賴項沒有變化，則返回緩存的函數引用。
