При многократном использовании одного и того же компонента 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

Есть ли выигрыш в производительности для рефакторинга вышеуказанного кода в:

Теоретически да, поскольку вы звоните React.createElement только один раз. Но имеет ли это заметное значение в вашем приложении - это другой вопрос. Скорее всего, нет.

Будет ли назначенный компонент отображаться и кэшироваться?

тл; д-р: №

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 - это объекты, которые содержат информацию о том, какую функцию вызывать, реквизиты для передачи и некоторую информацию метаданных.

Фактический рендеринг происходит позже.