React函数组件声明JSX变量与直接在返回JSX中使用的性能差异

AI 小北

2026-10-1

React函数组件两种JSX写法性能差异解答

待对比的代码片段

// 写法1：提前声明变量存储JSX
const FunctionalComponent = props => {
  const a = <span>Hello World</span>;
  return (
    <h1>
      {a} {props.counter}
    </h1>
  );
};

// 写法2：直接在返回的JSX结构中编写元素
const FunctionalComponent = props => {
  return (
    <h1>
      <span>Hello World</span> {props.counter}
    </h1>
  );
};

核心结论

二者仅存在理论级的微末性能差异，正常业务场景下完全无法感知，生产环境经过编译优化后差异甚至会彻底消失，不需要为了性能刻意选择其中一种写法。

差异细节说明

JSX本质是React.createElement的语法糖，两种写法最终都会被编译为生成React元素对象的逻辑：
- 写法1多了一步「将生成的span元素对象赋值给局部变量、再在返回时读取变量引用」的操作，这个操作的开销在纳秒级别，只有组件每秒渲染数十万次的极端压测场景下才可能被检测到，日常使用完全不会有体感差异。
- 写法2直接在返回结构内生成span元素对象，省去了额外的变量存储和读取步骤，理论性能略优，但优势可以忽略不计。
目前主流的编译工具（Babel、SWC等）在生产环境开启压缩优化后，会自动做常量折叠处理，这两段代码编译后的产物完全一致，不存在任何性能差别。
额外补充：两种写法都不会对静态的span节点做缓存，组件每次渲染都会重新生成对应的React元素对象。如果确实要针对这个节点做性能优化，可以用useMemo包裹变量，但对于这种简单的静态节点来说，useMemo本身的依赖比对开销反而可能超过重新生成元素的开销，属于负优化。