mcpField
R
rendering-hoist-jsx

rendering-hoist-jsx

github.com/theorcdev开发2.1k38 次安装2 天前更新
代码仓库

关于 rendering-hoist-jsx

这项 React 编码技能建议将静态 JSX 元素移到组件外，避免每次渲染都重新创建。它也指出，启用 React Compiler 时无需手动提升，因为编译器会自动优化。

主要功能

  1. 01将静态 JSX 移到组件外
  2. 02在多次渲染间复用元素
  3. 03优化大型静态 SVG 节点
  4. 04考虑 React Compiler 的优化

适用场景

  1. 01避免重复创建加载骨架
  2. 02在多次渲染间复用静态 SVG

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/theorcdev/8bitcn-ui --skill rendering-hoist-jsx

安装后在 Claude Code 中输入/rendering-hoist-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 Compiler，编译器会自动将静态 JSX 元素提升到组件外部，并优化组件的重新渲染，因此无需手动提升。

评论

支持 Markdown