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

## 提升静态 JSX 元素

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

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

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

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

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

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

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

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

**注意：** 如果你的项目已启用 [React Compiler](https://react.dev/learn/react-compiler)，编译器会自动提升静态 JSX 元素并优化组件重新渲染，使得手动提升变得不再必要。