1. 使用 React.memo 進行組件優化

• 問題：當父組件重新渲染時，子組件也會重新渲染，即使它的 props 沒有變化。

• 解決方案：使用 React.memo 包裹子組件，讓其只在 props 變化時才重新渲染。

const MyComponent = React.memo((props) => {// 子組件代碼
});

2. 使用 useCallback 和 useMemo 優化函數和計算

• 問題：在函數式組件中，每次渲染都會創建新的函數和計算，導致不必要的渲染和性能浪費。

• 解決方案：使用 useCallback 緩存函數，useMemo 緩存計算結果。

const handleClick = useCallback(() => {// 點擊事件處理邏輯
}, [dependencies]);const computedValue = useMemo(() => {// 復雜計算邏輯return value;
}, [dependencies]);

3. 避免不必要的 Re-render

• 問題：由于父組件的狀態或 props 改變，導致子組件不必要地重新渲染。

• 解決方案：拆分組件，使用 shouldComponentUpdate（類組件）或 React.memo（函數組件），并確保 key 使用合理。

4. 虛擬列表（Virtual List）優化長列表渲染

• 問題：渲染大量列表項會導致頁面卡頓。

• 解決方案：使用虛擬滾動技術（如