При многократном использовании одного и того же компонента React эффективнее назначить его переменной?
<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>
Будет ли отрисован и кеширован назначенный компонент?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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.info('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.info(<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 - это объект, содержащий информацию о том, какую функцию вызывать, пропсы, которые нужно передать, и некоторую информацию о метаданных.
Фактический рендеринг происходит позже.