react-best-practices

React 最佳实践

属于 Agent Skills™，由 googleadsagent.ai™ 提供

描述

React 最佳实践将 8 个优先级类别中的 40 多条规则编纂成章，涵盖从关键级别（消除瀑布式请求、缩减包体积）到低至中优先级（JavaScript 微优化）的内容。每条规则都可付诸实践，包含严重性评级以及修改前后的代码示例。Agent 在编写或审查 React 代码时会自动应用这些规则。

规则按影响程度排序，而非按实现难易程度排序。消除客户端与服务端之间的瀑布式请求并缩减包体积，能带来最大的性能提升，因此列为关键级别。其次是服务端渲染性能和客户端数据获取模式。重新渲染优化通常是开发者最先着手处理的事项，但其评级为中，因为与网络和包体积问题相比，它很少导致可衡量的用户体验性能问题。

本技能将 React 性能视为系统属性，而非组件属性。影响最大的优化发生在架构层面：数据获取的位置、包的拆分方式以及采用的渲染策略。技能也涵盖组件层面的优化（记忆化、键稳定性），但会正确地将其列为较低优先级。

使用场景

• 编写新的 React 组件或页面
• 审查 React 代码中的性能问题
• 调试页面加载缓慢或交互迟缓的问题
• 优化 Core Web Vitals（LCP、FID、CLS）
• 从客户端渲染迁移到服务端渲染
• 缩减 JavaScript 包体积

工作原理

graph TD
    A[React Code Change] --> B{Priority Scan}
    B --> C["🔴 Critical: Waterfalls"]
    B --> D["🔴 Critical: Bundle Size"]
    B --> E["🟠 High: Server Perf"]
    B --> F["🟡 Med-High: Client Fetch"]
    B --> G["🟡 Medium: Re-renders"]
    B --> H["🟡 Medium: Render Perf"]
    B --> I["🔵 Low-Med: Micro-opts"]
    C --> J[Apply Fixes by Priority]
    D --> J
    E --> J
    F --> J
    G --> J
    H --> J
    I --> J

规则按优先级顺序评估。关键问题会被标记为阻断项；较低优先级的问题则会作为建议列出。Agent 会优先应用影响最大的修复。

实现

关键：消除客户端与服务端之间的瀑布式请求

// BAD: Sequential fetches create waterfalls
function Dashboard() {
  const user = use(fetchUser());         // 200ms
  const posts = use(fetchPosts(user.id)); // 200ms after user resolves
  const stats = use(fetchStats(user.id)); // 200ms after user resolves
  // Total: 600ms sequential
}

// GOOD: Parallel fetches with server components
async function Dashboard() {
  const user = await fetchUser();
  const [posts, stats] = await Promise.all([
    fetchPosts(user.id),
    fetchStats(user.id),
  ]);
  // Total: 400ms (user + parallel posts/stats)
}

关键：缩减包体积

// BAD: Import entire library
import { format } from "date-fns";

// GOOD: Tree-shakeable import
import { format } from "date-fns/format";

// BAD: Eager loading heavy components
import { HeavyChart } from "./HeavyChart";

// GOOD: Lazy loading with Suspense
const HeavyChart = lazy(() => import("./HeavyChart"));

中：优化重新渲染

// BAD: New object reference every render
<UserContext.Provider value={{ user, theme, locale }}>

// GOOD: Stable reference with useMemo
const contextValue = useMemo(
  () => ({ user, theme, locale }),
  [user, theme, locale]
);
<UserContext.Provider value={contextValue}>

最佳实践

• 先修复关键问题，再优化中或低优先级事项
• 优化前先测量——使用 React DevTools Profiler 和 Lighthouse
• 数据获取优先使用服务端组件；仅在需要交互时使用客户端组件
• 对任何在初始视口中不可见的组件，使用 dynamic(() => import(...))
• 避免过早使用 useMemo/useCallback——先进行性能分析，确认重新渲染确实代价高昂
• 尽可能缩小客户端组件边界，以尽量降低水合成本

平台兼容性

平台	支持情况	备注
Cursor	完全支持	集成 lint 和审查
VS Code	完全支持	支持 ESLint 插件
Windsurf	完全支持	支持 React 的分析
Claude Code	完全支持	应用于代码审查
Cline	完全支持	基于规则的审查
aider	部分支持	手动应用规则

相关技能

• 组合模式
• 视图过渡
• Web 设计指南
• 边缘渲染

关键词

react performance best-practices bundle-size waterfall-elimination server-components re-render-optimization core-web-vitals

---

© 2026 googleadsagent.ai™ | Agent Skills™ | MIT License