React最佳实践，按62条规则消水瀑优化重渲染

React 应用变慢，通常慢在哪几处

React 项目的性能问题往往不是单点，而是几类反模式叠加：异步请求一个接一个串行执行，形成"数据水瀑"，首屏迟迟出不来；第三方库和大组件全量打进首屏 bundle，下载和解析都拖慢加载；组件因为对象引用变化反复重渲染，列表一滚就卡；还有布局抖动、热路径里反复读写存储等隐性开销。这些问题分散在数据请求、打包、渲染、JavaScript 热路径等多个层面，靠零散经验很难一次盘清。

这个技能能帮你检查和修什么

它把 Vercel 团队的 62 条规则按八个维度组织起来：消除数据水瀑、减小 bundle、服务端性能、客户端数据请求、重渲染优化、渲染性能、JavaScript 热路径和高级模式。每条规则都按影响优先级排序，配有可定位的示例。实际使用时，它会针对你的代码或问题，指出命中的反模式，并给出对应做法——比如用 Promise.all 或 Suspense 把串行请求并行化；用直接导入、动态导入、延迟加载第三方库来压低 bundle；优化服务端缓存、RSC 序列化和 Server Action 认证；减少无效重渲染、布局抖动、存储读取和数组热路径开销；以及用 SWR、Map/Set、稳定订阅等高级模式收尾。

把规则按影响优先级排序的意义在于：性能优化的投入产出差异很大，先改最影响首屏和交互的项，再处理次要项，比无序地逐条试效率高得多。

怎么用它

用法是把要写的组件、要审查的代码或遇到的性能现象用自然语言描述给它，由它对照规则定位问题、给出优化方向。例如可以这样对它说：

它适合这些场景：新写 React 组件或 Next.js 页面时预防性能反模式；审查代码时发现首屏慢、交互延迟、请求串行或包体过大；重构客户端状态、Effect 依赖、回调订阅和派生状态逻辑；以及需要按规则文件定位具体示例、形成可执行的优化清单。适合 React/Next.js 开发者、前端性能工程师、技术负责人和代码审查者，用来建立统一的重构与性能评估标准。