useEffect
useEffect是React的一個Hook，用于在函數組件中處理副作用。副作用包括數據獲取、訂閱、手動DOM操作以及其他需要再渲染后執行的操作
基本用法
useEffect(() => {// 副作用邏輯return () => {// 可選的清理函數}
}, [依賴數組])
- 第一個參數：一個回調函數，包含副作用邏輯
1-1. 回調函數會在組件渲染后執行
1-2. 如果返回一個函數，這個函數會在組件卸載或依賴項更新時執行，用于清理副作用 - 第二個參數：依賴數組（可選）
2-1. 如果不傳依賴數組，useEffect會在每次渲染后執行
2-2. 如果傳空數組[]，useEffect只會在組件掛載和卸載時執行一次
2-3. 如果傳特定的依賴項（如prop1，state1），useEffect只會在這些依賴項發生變化時執行
總結：
- 無依賴數組：每次渲染后都會執行
- 空依賴數組：只在組件掛載和卸載時執行
- 帶依賴數組：依賴項發生變化時執行
- 清理函數：在組件卸載或依賴項更新時清理副作用
useLayoutEffect
useLayoutEffect是React的一個Hook，與useEffect類似，主要用于在DOM更新后同步執行的操作
基本用法
useLayoutEffect(() => {// 副作用邏輯return () => {// 可選的清理函數}
}, [依賴數組])
useEffect和useLayoutEffect的區別
- useEffect在瀏覽器完成布局和繪制后異步執行（非阻塞渲染）；useLayoutEffect在DOM更新后、瀏覽器繪制之前同步執行（阻塞渲染）
- useEffect適用于不需要阻塞渲染的副作用，例如數據獲取、事件監聽等；useLayoutEffect適用于在DOM更新后立即執行的副作用，例如測量DOM元素尺寸、同步DOM操作等
)
