生成样式组件关键帧的函数是否昂贵？答案

【问题标题】：Is a function generating styled-components keyframes expensive?生成样式组件关键帧的函数是否昂贵？
【发布时间】：2018-03-26 23:41:20
【问题描述】：

在使用 styled-components 时，我试图创建一个函数，其中一些输入返回一个 css 标记函数，该函数需要一些特定的关键帧（与我的 css 标记函数紧密耦合）。

我最终在函数内部定义了我的关键帧以访问闭包，并问我自己是否每次重新定义函数调用的关键帧在性能方面可能会很昂贵，如果有处理这种情况的更好方法。

这是一个 sn-p，它说明了我试图解释的内容，当然我的问题只对比这个更大更复杂的关键帧有意义：

const growBorder = (color, from, to) => {

  const grow = keyframes`
    from { border: ${from} solid ${color}; }
    to { border: ${to} solid ${color}; }
  `

  return css`
    border: ${from} solid ${color};
    animate: ${grow} 3s linear 1s infinite alternate;
`
}



const Button = styled.button`
  ${growBorder('purple', '1px', '3px')}
`


const UglyButton = styled.button`
  ${growBorder('red', '10px', '30px')}
`

...

【问题讨论】：

标签： javascript css styled-components

【解决方案1】：

答案是肯定的。创建像你这样的keyframes 是昂贵的。

如果您查看styled-components 中的definition of keyframes，您会发现每次styled-components 看到keyframes 帮助器时，它都会对keyframes 声明的内容进行哈希处理。如果未找到匹配项（就像您的动态 keyframes 一样），它将在文档的样式表中注入新的样式规则，从而强制进行全局重排。

【讨论】：