是否有条件地渲染 React 组件而不是原始标记保存性能？

Question

这在我的脑海中很有意义，但我无法找到任何事实/文章来支持这一点。

本质上是在做类似的事情

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

性能低于

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

whereSomeComponent与上一个示例具有完全相同的标记。

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

反应文档中是否有更彻底地解释这一点的地方？
还是这个推理不准确？

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>;

这两个选项都非常快并且不应该进行优化。