无Props的React变量式组件是否比memo化组件渲染更高效？

首先得纠正一个常见误区：React.memo(<div />)是错误用法——React.memo的参数必须是组件（函数组件或类组件），而<div />是React元素实例，不是组件。正确的memo化无props组件写法应该是：

const Y = React.memo(() => <div />)

接下来分两种场景对比你关心的效率问题：

场景1：元素变量定义在父组件外部（全局/模块级） #

比如：

// 模块顶部定义，只执行一次
const x = <div />

function Parent() {
  return <div>{x}</div>
}

这种情况下，x是一个固定的React元素对象，每次父组件渲染时，React对比组件树会直接识别到这是同一个元素，完全跳过该节点的更新逻辑，直接复用对应的DOM节点，没有额外开销。

而memo化组件Y，每次父组件渲染时，虽然因为无props变化会触发memo的缓存命中，但仍会执行一次memo的浅比较逻辑（哪怕props为空），然后返回缓存的元素。相比直接复用全局元素，多了一层比较的开销，所以这种场景下x的渲染效率更高。

场景2：元素变量定义在父组件内部 #

比如：

function Parent() {
  const x = <div /> // 每次父组件渲染都会创建新的元素对象
  return <div>{x}</div>
}

这种情况下，每次父组件渲染都会生成一个新的<div />元素对象。React会对比新旧元素的类型（都是div）和props（为空），确认无需更新DOM，但创建新元素对象本身有微小开销。

而memo化组件Y，因为无props，每次父组件渲染时memo的浅比较会直接通过，不会重新调用组件函数，直接返回缓存的元素对象。这种场景下，memo化组件的效率反而更高，因为避免了重复创建元素对象的开销。

总结 #

• 如果是全局复用的固定元素，直接定义为元素变量的方式效率更高；
• 如果元素只能在组件内部定义（比如依赖父组件上下文，但你这里是无props组件），memo化组件的方式更高效；
• 务必注意React.memo的正确用法，不要用它包裹元素实例。

内容的提问来源于stack exchange，提问作者Kalinovsky Konstantin