静态JSX元素提升渲染优化Skill rendering-hoist-jsx

---

name: rendering-hoist-jsx description: 提取静态 JSX 元素到组件外部以避免在每次渲染时重新创建。适用于重复渲染静态元素或在列表中。

提升静态 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 编译器，编译器会自动提升静态 JSX 元素并优化组件重新渲染，使手动提升变得不必要。