styled-components 卡顿主因是 css 规则爆炸与类名频繁变更，而非组件重渲染；动态插值（尤其高频/连续值）导致缓存失效、cssom 重解析及图层失控。
它根本不会直接触发重渲染——问题出在你误把样式更新当成了组件重渲染，而真正拖慢性能的是 CSS 规则爆炸和类名频繁变更。
动态插值让 styled-components 放弃缓存
只要模板字符串里出现 ${props => ...}，整个样式规则就失去静态缓存能力。哪怕只有 color 是动态的，padding、border-radius 这些静态部分也会被迫每次重新计算类名。
- 静态样式（无插值）：只注入一次
<style></style>，后续复用同一 class - 含任意函数插值：每组唯一 props 组合生成新 class，
size="lg"和size="sm"就是两个不同规则 - 高频变动值如
scrollY或mouseX会让 class 名持续刷新，浏览器反复销毁/重建图层
class 名变了，但组件没重渲染，为什么还卡？
React 组件本身可能没重渲染（React.memo 生效），但 styled-components 注入的新 class 会强制浏览器执行 CSSOM 重解析、样式计算、布局（layout）甚至重绘（paint）——尤其当涉及 transform、opacity 等合成属性时，图层管理失控才是卡顿主因。
- DevTools 的 Layers 面板里能看到图层数量随滚动线性增长
- Memory 面板中
Detached HTMLStyleElement持续增加，说明卸载后样式未清理 - 动画卡顿常发生在列表项挂载/卸载频繁的场景，本质是
@keyframes被反复增删触发 CSSOM 锁
哪些 props 值最容易引发规则爆炸
不是所有动态值都危险，关键看是否「离散」和「低频变更」：
- ✅ 安全：
variant="primary"、size="md"、disabled={true}—— 枚举值，组合有限 - ❌ 危险：
top={window.scrollY}、hue={Date.now() % 360}、style={{ transform: `translateX(${x}px)` }}—— 每次渲染都不同，缓存完全失效 - ⚠️ 隐患：
theme={{ primary: '#333' }}—— 对象引用每次变，即使内容相同，也会触发新规则生成
最常被忽略的一点：你写的插值函数只在首次渲染时执行一次（生成规则），之后 props 变化只是切换已存在的 class；如果样式没更新，大概率是函数返回了空字符串、undefined 或无效 CSS 值，而不是“函数没跑”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
