Javascript 在模板文本中定义函数

我使用的是React的造型解决方案。他们有一个很好的方法，使用模板文本来插入CSS。模板文本通过组件的道具传递，以便您可以执行以下操作：

const PasswordsMatchMessage=styled.div`
背景：${props=>props.isMatching？'green'：'red'}；
`

结果是一个组件，它根据

isMatching

的值呈现绿色或红色背景的

div

标记。上述内容将通过JSX使用，如下所示：

。。。

每当

props

的值更改时，该字符串将被重新插值。最后我想问一个问题：

每次插入模板文本时，是否会重新定义模板文本中定义的箭头函数？

如果是这样，那么我可以考虑在模板文本之外创建函数，而只是传递那些函数，例如

const PasswordsMatchMessage=styled.div`
背景：${isMatchingFn}；
`

是的，它将在每次插入模板文本时定义函数的新版本。您可以通过定义跟踪上一个值的自己的标记来验证这一点

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'};`

几次之后，请注意它的计算结果总是

“获得了一个不同的函数”

，这表明它每次都在创建一个新函数

将其与此版本进行比较：

trackInterpolations`background: ${isMatchingFn};`

第一次运行时，它将计算为“获得不同的函数”（因为它还没有看到

匹配fn

），但如果您再计算几次，它将始终导致

“获得相同的函数”

，因为函数引用正在被重用

---

在本例中，我不会太担心性能影响，除非您实际注意到速度减慢，否则我会选择更具可读性的方法。与重新渲染div相比，创建新函数的开销可能不会太高。

我不明白为什么这样做不起作用。你测试过了吗？@KeithA它确实有效，这不是我的问题。我只是编辑了我的帖子，让问题更清楚，因为它有点隐蔽；）嗯，我不确定。你的问题有什么原因吗？这将是一个潜在的性能瓶颈我想你的意思是，即使第二次运行它，仍然会导致

得到一个不同的函数

——否则，这将意味着函数没有得到重新定义，从而与你的答案相矛盾。我也试过了，它说每次都是不同的函数：）。关于性能瓶颈，不，我现在不担心。但是这种模板文字的用法对我来说是新的，所以我想确保我理解了发生的事情。@maxedison再次阅读后，这部分内容不是很清楚，因为它涉及两个不同的表达式。是的，在某些情况下，可能会影响性能，因此很高兴知道：）