1. 懒加载 (Lazy Loading)
使用 React.lazy() 和 Suspense 来实现懒加载（按需加载）组件。只有在需要时才加载对应组件，可以减小初始加载的体积。
const LazyComponent = React.lazy(() => import('./LazyComponent'));function App() {return (<Suspense fallback={<div>Loading...</div>}><LazyComponent /></Suspense>);
}
这对于较大的组件或路由非常有效，尤其是在单页应用中。
2. 使用 React.memo() 进行组件缓存
如果组件的 props 没有发生变化，可以通过 React.memo() 防止不必要的重新渲染。它是一个高阶组件，比较前后 props，如果相同则跳过渲染。
const MyComponent = React.memo(function MyComponent(props) {/* 渲染逻辑 */
});
这样可以避免父组件每次更新时子组件无意义的重复渲染。
3. 使用 useMemo 和 useCallback 缓存值和函数
useMemo 和 useCallback 可以缓存计算结果和函数，减少因每次渲染导致的重复计算和函数生成。
-
useMemo用来缓存昂贵的计算结果：const computedValue = useMemo(() => {return expensiveComputation(data); }, [data]); -
useCallback用来缓存函数：const handleClick = useCallback(() => {console.log('Button clicked'); }, []);
4. 代码拆分 (Code Splitting)
使用 Webpack 的动态导入（import()）来实现代码拆分，使应用按需加载不同部分，减小初始包大小。
import('./MyComponent').then(module => {const MyComponent = module.default;
});
这使得应用在用户首次加载时不必加载所有代码，提高了加载速度。
5. 避免不必要的状态更新
- 合理使用
useState和useReducer，避免过度使用全局状态（如 Context）。 - 状态应该尽可能局部化，只在需要的地方维护状态，避免导致整个应用的重渲染。
6. Virtual DOM Diffing 优化
- 确保为列表中的元素提供唯一的
key值，以便 React 能够高效地进行 diff 运算。 - 避免在每次渲染时生成新对象作为
key（如使用index作为key可能会导致问题）。
7. 减少 Reconciliation 过程
- 合并多次
setState调用，避免重复渲染。 - 如果一个组件较复杂，考虑将其拆分为多个更小的组件，这样 React 可以只更新发生变化的部分。
8. 避免匿名函数和对象的重新创建
在渲染时，React 识别不同的函数和对象。如果每次都创建新的匿名函数或对象，React 会认为它们是不同的，导致额外的渲染。
// 每次渲染时，都会创建新的函数引用
<Button onClick={() => console.log('clicked')} />// 优化：使用 useCallback 缓存函数
const handleClick = useCallback(() => console.log('clicked'), []);
<Button onClick={handleClick} />
9. 调试工具
使用 React 的性能调试工具 React DevTools Profiler 分析应用的性能瓶颈，并优化慢速渲染的部分。
10. 使用 React concurrent mode (并发模式)
React 的并发模式允许 React 打破长时间的同步渲染任务，把工作拆分成多个小任务来提高响应性。这可以在用户界面交互中提供更流畅的体验，但需要确保应用对并发模式做好了准备。
