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

Question

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

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

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

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

...

Answer 1

答案是肯定的。创建像您这样的 keyframes 非常昂贵。

如果你查看 styled-components 里面的 definition of keyframes，你可以看到每次 styled-components 看到一个 keyframes 助手，它会哈希 keyframes声明。如果未找到匹配项（就像您的动态 keyframes 的情况一样），它将在文档的样式 sheet 中注入新的样式规则，强制进行全局重排。

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

Is a function generating styled-components keyframes expensive?

javascript

css

styled-components