Влияют ли функции стрелок в шаблонах стилевых компонентов на производительность? - PullRequest
Новая
       21

Влияют ли функции стрелок в шаблонах стилевых компонентов на производительность?

0 голосов
/ 22 мая 2019

Повторный вызов анонимных функций ухудшает производительность кода.

Например, если мы повторно вызываем doubleArrayItems, этот код: 

function doubleArrayItems(array) {
    return array.map(number => number*2);
}

будет работать немного хуже, чем этот код: 

const doubleNumber = number => number*2;

function doubleArrayItems(array) {
    return array.map(doubleNumber);
}

Это потому, что функции стрелок являются анонимными, и каждый раз, когда они вызываются, необходимо создавать новый экземпляр.

Применяется ли то же самое при использовании функций стрелок внутри шаблонов стилевых компонентов? Или библиотека стилевых компонентов каким-то образом хранит функции внутри?



Например, будет ли это: 

...

const StyledDiv = styled.div`
    height: ${props => getProp(props, 'height')};
`;

хуже, чем этот: 

...

const getHeightFromProps = props => getProp(props, 'height');

const StyledDiv = styled.div`
    height: ${getHeightFromProps};
`;

при повторном рендеринге <StyledDiv> повторно?

...