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

Question

这是我头脑中有意义的事情，但我还没有找到任何事实/文章来支持这一点。

基本上是在做类似

的事情

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

性能低于

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

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

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

反应文档中是否有某些地方可以更彻底地解释这一点？ 或者这种推理不准确？

Answer 1

JSX是BeanPostProcessor的语法糖。正如在Babel REPL中可以看到的那样，它们是

React.createElement

和

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

分别

如果return someBoolean && React.createElement(SomeComponent, null); 是假的，则someBoolean未被调用且React.createElement变为无操作。

render未缓存，每次都会重新创建。与原始标记相比，它提供了可忽略的开销，考虑到它是无状态组件：

SomeComponent

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

Answer 2

是否有条件不是问题，因为如果shouldComponentUpdate为假，则不会在{{1}}之后进行评估。

真正的问题是，定义的React子组件是否具有性能优势或惩罚，而不是在另一个组件中定义的普通JSX标记。出于实际目的，除非您使用生命周期钩子的自定义函数，否则没有性能差异。

例如，如果使用子组件，则可以在该组件中定义单独的{{1}}方法，从而将其更新与父组件分离。在普通JSX的情况下，它将作为父组件的一部分进行更新。