Определение функции внутри литерала шаблона

Question

Я использую styled-components в качестве решения для стилизации для React. У них есть хороший подход, который использует шаблонные литералы для интерполяции CSS. Литералы шаблона передаются реквизит компонента, так что вы можете сделать что-то вроде:

const PasswordsMatchMessage = styled.div` 
    background: ${props => props.isMatching ? 'green' : 'red'}; 
` 

Результата является компонентом, который оказывает div тега либо с зеленым или красным цветом фона в зависимости от значения isMatching. Выше будет использоваться через JSX так:

<PasswordsMatchMessage isMatching={doPasswordsMatch}>...</PasswordsMatchMessage> 

Каждый раз, когда значение props изменений, эта строка будет повторно интерполированным. Что, наконец, приводит меня к моему вопросу:

Определяет ли функция стрелки, определенная внутри литерала шаблона, каждый раз, когда шаблонный литерал интерполируется?

Если да, то я могу рассмотреть возможность создания функций вне литерала шаблона и просто передать их, например.

const PasswordsMatchMessage = styled.div` 
    background: ${isMatchingFn}; 
` 

Answer 1

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

var previous; 
function trackInterpolations(literalParts, interpolated) { 
    if (interpolated === previous) { 
    answer = 'Got the same function'; 
    } else { 
    answer = 'Got a different function'; 
    } 
    previous = interpolated; 
    return answer; 
} 

Затем запустите

trackInterpolations`background: ${props => props.isMatching ? 'green' : 'red'};` 

пару раз и обратите внимание, что она всегда имеет значение 'Got a different function', указывая, что он создает новую функцию каждый раз.

Сравните с этой версией:

trackInterpolations`background: ${isMatchingFn};` 

В первый раз он запущен, он будет вычисляться 'Got a different function' (потому что он не видел isMatchingFn пока), но если вы вычислите его еще несколько раз, это всегда будет иметь значение 'Got the same function', потому что ссылка на функцию повторно используется.

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