react

用途：为 React v19 + Vite 单页应用提供性能优化实践，改编自 Vercel 的 react-best-practices，规则按影响从高到低排序，建议先修 CRITICAL 级问题。\n\n主要能力：一、消除瀑布请求（CRITICAL），独立异步操作用 Promise.all 并行；await 延迟到真正需要时。二、打包体积（CRITICAL），避免 barrel 文件导入（lucide-react、@mui/material、react-icons、@radix-ui/*、lodash、date-fns 等），改用按路径导入；重组件用 React.lazy + Suspense 动态导入，并在 onMouseEnter/onFocus 时预加载。三、重渲染优化（MEDIUM），useState 昂贵初始化用回调形式，setState 依赖当前值用函数式更新，抽取 memo 组件，Effect 依赖收窄为原始值，用 useMediaQuery 只订阅派生布尔值，非紧急更新用 startTransition/useTransition。四、渲染性能（MEDIUM），条件渲染用 count > 0 避免渲染 0，长列表用 content-visibility，静态 JSX 提升到组件外，动画加在包装元素而非 SVG。五、JavaScript 性能（LOW-MEDIUM），用 Map/Set 做 O(1) 查找、合并循环迭代、循环内缓存属性访问。六、高级模式（LOW），用 ref 保持稳定事件处理与 useLatest 模式。\n\n使用方式：按清单逐项自检，如无独立操作的顺序 await、大库的 barrel 导入、useState 回调初始化、函数式 setState、Effect 依赖为原始值、长列表 content-visibility、Map/Set 查找等。\n\n适用场景：Vite 构建的 React v19 SPA 性能排查与代码评审。限制：面向 Vite SPA，其他框架或 SSR 场景未说明；部分规则因 React Compiler 自动记忆化而变为可选；具体收益数值来自资料示例，未必适用于所有项目。