テンプレートリテラル内に関数を定義する

Question

私はstyled-componentsをReactのスタイリングの解決策として使用しています。テンプレートリテラルを使ってCSSを補間する素晴らしい方法があります。あなたのようなことを行うことができるようにテンプレートリテラルは、コンポーネントの小道具を渡されます。

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

結果はisMatchingの値に応じて、緑または赤の背景のいずれかでdivタグをレンダリングするコンポーネントです。上記のようにJSXを経由して使用することになります。

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

たびpropsの値が変化し、この文字列は、再補間されようとしています。最後に私の質問に私をもたらします：

テンプレートリテラルが定義されるたびに、テンプレートリテラル内で定義された矢印関数が再定義されますか？

もしそうなら、私はテンプレートリテラルの外で関数を作成し、それらを渡すことを検討するかもしれません。

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'と評価されていることに気づきます。

このバージョンにすることを比較します。それを（それがまだisMatchingFnを見ていないので）

trackInterpolations`background: ${isMatchingFn};` 

それが実行しています初めて、それは'Got a different function'と評価されますが、あなたがそれを評価する場合にはさらに数回関数参照が再利用されているため、常に'Got the same function'になります。

この場合でもパフォーマンスの影響はあまり気にならないでしょうし、実際に減速に気付かない限り、読みやすくなるものはありません。 divを再レンダリングする場合と比較して、新しい関数を作成するオーバーヘッドはあまり高くありません。