在styled-components中每次调用函数重定义keyframes是否有性能损耗？

API 探路者

2026-5-21

这个问题问到点子上了——我之前在做大型styled-components项目时也踩过类似的坑，每次调用函数都重新定义keyframes确实会有性能损耗，而且比你想象的影响可能还不小，下面给你拆解原因和优化方案：

为什么每次重定义keyframes会有性能问题？

styled-components里的keyframes函数并不是简单的字符串拼接，它会生成一个唯一的动画实例，每次调用都会：

创建新的JS对象，带来轻微的运行时内存开销；
向页面的样式表注入一条全新的CSS动画规则（即使动画内容完全一样，类名也会不同），随着调用次数增多，样式表会被大量冗余规则塞满，不仅增加CSS体积，还会让浏览器渲染时需要处理更多规则，影响页面加载和渲染性能。

尤其是如果你的函数被频繁调用（比如在列表组件里循环调用），这个问题会被放大，很快就能看到样式表变得臃肿。

最优处理方案，分两种情况

情况1：keyframes不依赖函数的输入参数

如果你的动画逻辑是固定的，不需要用到传入input里的变量，那最简单的解决办法就是把keyframes提到函数外部，全局定义一次，这样不管函数被调用多少次，都只会生成一条CSS动画规则：

// 全局定义，只创建一次
const fadeIn = keyframes`
  from { opacity: 0; }
  to { opacity: 1; }
`;

const createStyledComponent = () => {
  return styled.div`
    animation: ${fadeIn} 1s ease-in-out;
  `;
};

情况2：keyframes需要用到函数的输入参数

如果动画必须依赖input里的动态值（比如不同的透明度、颜色或者动画时长），这时候不能直接全局定义，我们可以用**缓存（Memoization）**来避免重复创建相同参数的keyframes：

方案A：手动用Map缓存（通用场景）

自己维护一个缓存容器，根据输入参数生成唯一的key，只有当参数变化时才重新创建keyframes：

// 初始化缓存容器
const keyframesCache = new Map();

const createStyledComponent = (input) => {
  // 用参数生成唯一缓存key（如果参数是复杂对象，建议用JSON.stringify或者更高效的哈希函数）
  const cacheKey = JSON.stringify(input);
  
  // 先查缓存，没有再创建
  let dynamicFade = keyframesCache.get(cacheKey);
  if (!dynamicFade) {
    dynamicFade = keyframes`
      from { opacity: 0; }
      to { opacity: ${input.opacity}; }
    `;
    keyframesCache.set(cacheKey, dynamicFade);
  }
  
  return styled.div`
    animation: ${dynamicFade} ${input.duration}s ease-in-out;
  `;
};

方案B：用React的useMemo（React组件内场景）

如果你的函数是在React组件内部使用的，直接用useMemo来缓存keyframes，它会自动根据依赖项变化重新生成：

const AnimatedComponent = ({ opacity, duration }) => {
  // 只有当opacity或duration变化时，才重新创建keyframes
  const dynamicFade = useMemo(() => {
    return keyframes`
      from { opacity: 0; }
      to { opacity: ${opacity}; }
    `;
  }, [opacity, duration]);

  const StyledDiv = styled.div`
    animation: ${dynamicFade} ${duration}s ease-in-out;
  `;

  return <StyledDiv>动态动画内容</StyledDiv>;
};

额外提醒

尽量避免在循环、频繁渲染的组件里动态创建keyframes，哪怕用了缓存，也要确保缓存key的生成是高效的（比如避免对大对象用JSON.stringify，尽量用简单的唯一标识）；
可以通过浏览器的DevTools查看Elements面板的样式表，检查是否有冗余的动画规则，来验证优化是否生效。

内容的提问来源于stack exchange，提问作者Elcoosp