WHAT - Vercel react-best-practices 系列（四）

文章目录

• 前言
• Guidelines
• Rendering Patterns
• • Animate SVG wrappers, not SVG elements directly
  • • 核心问题
    • 反例：直接动画
    • 推荐：动画容器
    • 典型场景
  • Use content-visibility: auto for long lists
  • • 核心问题
    • 反例：普通列表
    • 推荐：content-visibility
    • 额外技巧
  • Prevent hydration mismatch with inline scripts
  • • 核心问题
    • 反例：SSR 内直接修改 DOM
    • 推荐做法
    • 场景
  • Use explicit conditional rendering
  • • 核心问题
    • 反例：用 &&
    • 推荐：用三元
    • 额外注意
• 总结

前言

react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

Guidelines

在这个系列，我会逐条拆解，每一条都给出：

• 核心问题是什么
• 为什么会慢（本质原因）
• 典型业务场景
• 反例代码
• 推荐写法
• 在 React / Next.js 中的实际收益

Rendering Patterns

这是系列的第四部分。

Animate SVG wrappers, not SVG elements directly

「不要直接在 SVG 元素上做动画」

核心问题

• SVG 元素本身（<path>、<circle>）渲染成本高
• 动画会频繁触发 repaint / reflow
• 会严重影响性能，尤其在大量节点或复杂图形中

反例：直接动画

<svg width="100"height="100"><circle cx="50"cy="50"r="40"fill="red"style={{transform:`rotate(${angle}deg)`}}/></svg>

每次angle更新，浏览器必须重绘整个<circle>

推荐：动画容器

<div style={{transform:`rotate(${angle}deg)`}}><svg width="100"height="100"><circle cx="50"cy="50"r="40"fill="red"/></svg></div>

好处：

• 浏览器只在<div>上做 GPU transform
• <svg>内容不会被重复绘制
• 动画性能大幅提升

典型场景

• 仪表盘指针
• loading spinner
• 图表动态旋转

Use content-visibility: auto for long lists

「长列表使用 content-visibility 延迟渲染」

核心问题

• 浏览器渲染大 DOM（数百 / 千行）性能低
• 每次 scroll / paint 都计算 layout

反例：普通列表

<ul>{data.map(item=><li key={item.id}>{item.name}</li>)}</ul>

• 1000 行 → 每次渲染 / scroll 都会 layout / paint

推荐：content-visibility

<ul style={{contentVisibility:'auto',containIntrinsicSize:'1000px'}}>{data.map(item=><li key={item.id}>{item.name}</li>)}</ul>

好处：

• 浏览器只渲染可视区域
• DOM 节点仍在 document flow
• 性能接近虚拟列表，但不依赖 JS

额外技巧

• contain-intrinsic-size提前占位
• 对表格、卡片、长文列表非常适用

Prevent hydration mismatch with inline scripts

「避免 hydration mismatch / 客户端渲染与服务端不一致」

核心问题

• React SSR + RSC / Next.js
• 服务端生成 HTML → 客户端 hydrate
• 如果 inline JS 改变 DOM 或插入元素
• 会导致Hydration Mismatch→ 控制台报错 / UI 闪烁

反例：SSR 内直接修改 DOM

<div dangerouslySetInnerHTML={{__html:`<script>document.body.style.background='red'</script>`}}/>

• 服务端生成的 DOM 和客户端 React DOM不一致
• React hydrate 失败

推荐做法

• 用useEffect / useLayoutEffect在客户端处理

useEffect(() => { document.body.style.background = 'red' }, [])

SSR 阶段不改 DOM → 避免 mismatch

场景

• 动态插入广告 / 脚本
• 第三方库初始化
• UI 初始化特效

Use explicit conditional rendering

「条件渲染用三元表达式，而不是 &&」

核心问题

• false && <Component />会渲染false→ 有时造成空 DOM / Hydration mismatch
• 特别在 SSR / Client Hydration 时容易出错

---

反例：用 &&

{isVisible && <Modal />}

• SSR:isVisible=false→ 渲染false
• Client:isVisible=true→ 渲染<Modal />
• React 可能报 hydration mismatch

推荐：用三元

{isVisible ? <Modal /> : null}

• SSR / Client 渲染保持一致
• Hydration 安全

额外注意

• 对列表也适用：

{/* ❌ 不推荐 */} {items.length && <List items={items} />} {/* ✅ 推荐 */} {items.length > 0 ? <List items={items} /> : null}

总结

Rendering Patterns =让浏览器和 React 都高效

• SVG 动画 → wrapper transform
• 长列表 → content-visibility
• SSR → hydrate 安全
• 条件渲染 → 明确三元