react-best-practices

React 最佳实践

概述

一份全面的 React 和 Next.js 应用性能优化指南，涵盖 8 个类别中的 40 多条规则。规则按影响优先级排序，用于指导自动重构和代码生成。

适用场景

在以下场景中参考这些指南：

• 编写新的 React 组件或 Next.js 页面
• 实现数据获取（客户端或服务端）
• 检查代码中的性能问题
• 重构现有的 React/Next.js 代码
• 优化包体积或加载时间

按优先级排序的指南

规则按影响优先级排序：

优先级	类别	影响
1	消除瀑布流	CRITICAL
2	优化包体积	CRITICAL
3	服务端性能	HIGH
4	客户端数据获取	MEDIUM-HIGH
5	优化重新渲染	MEDIUM
6	渲染性能	MEDIUM
7	JavaScript 性能	LOW-MEDIUM
8	高级模式	LOW

快速参考

关键模式（优先应用）

消除瀑布流：

• 将 await 延迟到需要时再执行（移入分支）
• 对相互独立的异步操作使用 Promise.all()
• 尽早启动 Promise，延后等待
• 使用 better-all 处理部分依赖
• 使用 Suspense 边界流式传输内容

减小包体积：

• 避免从汇总文件导入（直接从源文件导入）
• 对大型组件使用 next/dynamic
• 延迟加载非关键的第三方库
• 根据用户意图预加载

高影响的服务端模式

• 使用 React.cache() 对每个请求进行去重
• 使用 LRU 缓存实现跨请求缓存
• 尽量减少 RSC 边界处的序列化
• 通过组件组合并行获取数据

中等影响的客户端模式

• 使用 SWR 自动对请求去重
• 将状态读取延迟到实际使用时
• 对开销较大的值使用惰性状态初始化
• 使用派生状态订阅
• 对非紧急更新使用 startTransition

渲染模式

• 为 SVG 外层容器添加动画，而非直接为 SVG 元素添加动画
• 对长列表使用 content-visibility: auto
• 使用内联脚本避免水合不匹配
• 使用显式条件渲染（? :，而非 &&）

JavaScript 模式

• 通过类批量修改 DOM CSS
• 为重复查找构建索引映射
• 缓存重复的函数调用
• 为保证不可变性，使用 toSorted() 替代 sort()
• 比较数组前先检查长度

参考资料

完整文档及代码示例见：

• references/react-performance-guidelines.md - 包含所有模式的完整指南

要查找特定模式，请在参考资料中使用 grep：

grep -l "suspense" references/
grep -l "barrel" references/
grep -l "swr" references/