react-最佳实践 是做什么的？
来自 Mastra Engineering 的 React 性能优化指南。在编写、审查或重构 React 代码时使用此技能，以确保遵循最佳性能模式。适用于涉及 React 组件、数据获取、打包优化或性能改进的任务。
核心原则
- 避免不必要的重渲染：使用
React.memo、useMemo和useCallback谨慎管理组件更新。 - 高效数据获取：采用数据缓存、请求合并和懒加载策略减少网络请求。
- 优化打包体积：通过代码分割、移除无用依赖和利用 Tree Shaking 减小最终产物体积。
- 优先使用原生 API：在可能的情况下，使用原生浏览器 API 替代第三方库以减小开销。
组件优化
- 在列表或频繁更新的组件上使用
React.memo进行浅比较。 - 使用
useMemo缓存计算密集型操作的结果。 - 使用
useCallback稳定回调引用，避免子组件不必要重渲染。 - 合理使用
key属性，避免在列表渲染中使用索引作为 key。
数据获取
- 使用
useEffect时，确保在清理函数中取消请求，避免内存泄漏。 - 采用
React Query或SWR等库进行自动缓存和后台更新。 - 必要时使用
Suspense实现懒加载和优雅降级。
打包优化
- 使用动态
import()进行代码分割。 - 使用
webpack-bundle-analyzer或vite内置分析工具监控产物体积。 - 从 CDN 或第三方库中按需引入模块，避免整体导入。
性能监控
- 使用 React Developer Tools 的 Profiler 分析渲染性能。
- 使用
performance.mark和performance.measure自定义性能标记。 - 监控实际用户指标，如 FCP、LCP 和 TTI。