javascript - 是否有条件地呈现 React 组件而不是原始标记以节省性能？

Question

这在我的脑海中是有道理的，但我一直无法找到任何事实/文章来支持它。

本质上就是在做类似的事情

render() {
  return (
    someBoolean && <div>Some Markup</div>
  )
}

性能低于

render() {
  return (
    someBoolean && <SomeComponent />
  )
}

其中 SomeComponent 具有与前面示例完全相同的标记。

我的理由是因为标记必须在每次重新渲染时创建它会占用更多内存而保存的组件 SomeComponent 将在内存中引用并且不必在每次重新渲染时创建。

react 文档中有什么地方更彻底地解释了这一点吗？
还是这个推理不准确？

Answer 1

JSX 是 React.createElement 的语法糖。在Babel REPL中可以看出, 他们是

return someBoolean && React.createElement(
  "div",
  null,
  "Some Markup"
);

和

return someBoolean && React.createElement(SomeComponent, null);

分别。

当 someBoolean 为假时，React.createElement 不会被调用并且 render 变为空操作。

SomeComponent 没有缓存，每次都会重新创建。与原始标记相比，考虑到它是无状态组件，它提供的开销可以忽略不计:

const SomeComponent = () => <div>Some Markup</div>;

这两个选项都非常快，不应该被优化。