React循环渲染中包装组件与内联条件的性能差异疑问

两种实现方式 #

方式一：封装AccessControl包装组件 #

const AccessControl = ({ content, children }: acProps) => {
  return content ? children : null;
};

<AccessControl content={order.location.messageInternal}>
  <Grid md={12} className="result-three-block padding" p={0.1}>
    <p>{order.location.messageInternal}</p>
  </Grid>
</AccessControl>

方式二：内联逻辑与运算符 #

{order.location.messageInternal && <Grid md={12} className="result-three-block padding" p={0.1}>
  <p>{order.location.messageInternal}</p>
</Grid>}

性能差异分析 #

在处理20条数据的map循环场景下，两种写法的性能差异几乎可以忽略，但底层执行逻辑有细微区别：

• 组件封装的额外开销：方式一中的AccessControl是自定义组件，每次渲染会触发React的组件初始化流程（比如props处理、函数执行），虽然无状态组件的开销极小，但对比方式二的内联表达式，还是多了一层组件实例的创建步骤。
• 子元素创建时机：方式一中，不管content是否为真，<Grid>元素都会先被创建作为children传递给AccessControl；而方式二用短路求值，只有条件为真时才会创建<Grid>，条件不满足时能避免生成不必要的React元素对象。

但在20条数据的量级下，这点差异完全不会影响页面性能，用户根本感知不到区别。

选择建议 #

• 要是这类条件渲染逻辑需要在多个地方复用，优先用AccessControl组件，能提升代码的可维护性，也更易统一修改规则。
• 只是单一场景的简单判断，内联逻辑与写法更简洁，少一层组件嵌套，代码更直观。

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