定義模板文字中的函數

我使用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}; 
`

來源

2017-01-31 maxedison

我不明白爲什麼這是行不通的。你測試過了嗎？ –

@凱瑟拉它確實有效，那不是我的問題。我剛編輯我的帖子，使問題更清晰，因爲它有點埋了;） – maxedison

嗯。我不確定。你的問題是否有理由？ –

是的，每次插入模板文字時它都會定義一個新版本的函數。您可以通過定義自己的跟蹤前一個值的標籤來驗證。

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相比，創建新函數的開銷不大可能很高。

來源

2017-01-31 22:10:51

@Bergi哎呀，謝謝你趕上:) –

我想你的意思是說，即使運行它第二次仍然會導致'有一個不同的功能' - 否則，這將意味着該函數沒有得到重新定義，因此與您的答案相矛盾。我也試過了，實際上，它說每次都是不同的功能:)。關於性能瓶頸，不，我現在不會擔心它。但是這種模板字面用法對我來說是新的，所以我想確保我能理解發生了什麼。 – maxedison

這是一個很好的答案！ :) – mxstbr

定義模板文字中的函數

回答

相關問題