用途：本技能用于优化 React 组件的渲染性能，解决静态 JSX 元素在每次渲染时被重复创建的问题。
主要能力：把不依赖 props、state 或其他动态数据的静态 JSX 元素从组件内部提取到组件外部，使其在模块加载时只创建一次，后续渲染直接复用同一元素实例，而不是每次渲染都重新创建。
使用方式：资料给出了正误两种写法对比。错误写法中，LoadingSkeleton 组件返回一个静态 div：
function LoadingSkeleton() { return <div className="animate-pulse h-20 bg-gray-200" /> }
function Container() { return ( <div> {loading && <LoadingSkeleton />} </div> ) }
正确写法中，把该 JSX 提取到组件外部并赋值为常量，组件内直接引用：
const loadingSkeleton = ( <div className="animate-pulse h-20 bg-gray-200" /> )
function Container() { return ( <div> {loading && loadingSkeleton} </div> ) }
适用场景：适合需要反复渲染静态元素的场合，例如加载占位、固定图标、列表中的静态项等。资料特别指出，对体积较大且静态的 SVG 节点尤其有帮助，因为每次渲染重新创建这类节点的开销较高。
限制与注意事项：只有当 JSX 确实是静态的、不依赖组件内部动态数据时才适用。资料同时说明，如果项目启用了 React Compiler，编译器会自动提升静态 JSX 元素并优化组件的重新渲染，此时手动提升就不再必要。除资料提及的内容外，关于该技能的其他细节暂未提供。