skillhub-088-vercel-react-best-practices/rules/rendering-hoist-jsx.md

---translation title: Hoist Static JSX Elements impact: LOW impactDescription: avoids re-creation tags: rendering, jsx, static, optimization

提升静态 JSX 元素

将静态 JSX 提取到组件外部，避免重复创建。

错误做法（每次渲染都重新创建元素）：

function LoadingSkeleton() {
  return <div className="animate-pulse h-20 bg-gray-200" />
}

function Container() {
  return (
    <div>
      {loading && <LoadingSkeleton />}
    </div>
  )
}

正确做法（复用同一元素）：

const loadingSkeleton = (
  <div className="animate-pulse h-20 bg-gray-200" />
)

function Container() {
  return (
    <div>
      {loading && loadingSkeleton}
    </div>
  )
}

这对于大型且静态的 SVG 节点尤其有用，因为每次渲染时重新创建它们的开销可能很大。

注意： 如果你的项目已启用 React Compiler，编译器会自动提升静态 JSX 元素并优化组件重新渲染，使得手动提升变得不再必要。