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）优化长列表渲染

• 问题：渲染大量列表项会导致页面卡顿。

• 解决方案：使用虚拟滚动技术（如