javascript - 多次使用同一个 React 组件时，将其分配给一个变量是否性能更高？

Question

<div>
  <SomeComponentWithProps propA={'some prop'} propB={'some other prop'} >
  <SomeComponentWithProps propA={'some prop'} propB={'some other prop'} >
</div>

将上述代码重构为:

const someComponent = <SomeComponentWithProps propA={'some prop'} propB={'some other prop'} >
<div>
   {someComponent}
   {someComponent}
</div>

分配的组件是否会被渲染和缓存？

Answer 1

Is there a performance benefit to refactoring the above code to:

理论上是的，因为您只调用了一次 React.createElement。但它是否会对您的申请产生显着影响是另一个问题。很可能不会。

Would the assigned component be rendered and cached?

tl;dr:不。

React.createElement 基本上返回一个组件“描述符”。该组件此时未实例化或呈现。我们可以轻松地对此进行测试(请注意，构造函数没有控制台输出):

class Foo extends React.Component {
  constructor() {
    super();
    console.log('inside constructor');
  }
 
  render() {
    return 'Foo';
  }
}

const component = <Foo />;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

让我们看一下组件描述符:

function Foo({bar}) {
  return <span>{bar}</span>;
}

console.log(<Foo bar={42} />);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

你可以看到，所有 React.createElement 返回的都是一个对象，其中包含有关调用哪个函数、要传递的 props 和一些元数据信息的信息。

实际渲染发生在稍后。