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那样），它会在文档的样式表中注入一个新的样式规则，强制进行全局重排。

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

1 个答案: