styled.div 在循环中调用会加重重排，因其每次生成新组件实例和独立 css 规则，导致 style 标签激增、类名重复、dom 替换而非复用，进而触发样式重计算与重排。
Styled Components 本身不直接触发重排，但它的常见误用方式（比如在 render 中动态创建组件、频繁注入新样式规则、或配合不当的 DOM 操作）会间接导致大量 <style></style> 标签注入、类名重复生成、甚至强制同步样式计算——这些都可能引发浏览器重排。
为什么 styled.div 在循环里调用会加重重排
每次调用 styled.div 都会生成一个新组件实例，并注册一条独立 CSS 规则。如果写在 map 或 render 内部，每轮渲染就新增几十个 <style></style> 节点，DOM 中残留的 Detached HTMLStyleElement 数量持续上涨；更关键的是，这些规则往往带动态插值（如 ${props => props.color}），导致每次 props 微小变化都生成新 class 名，React 重渲染时 DOM diff 判定为“节点不同”，触发整块替换而非复用，连带样式重计算和重排。
- 错误写法：
items.map(item => styled.div`color: ${item.color};`) - 正确做法：提前定义好静态组件，用
className或style控制差异部分 - 若必须动态颜色，改用 CSS 变量：
const Box = styled.div`color: var(--text-color);`;
渲染时传style={{ '--text-color': item.color }}
动态插值中读取 layout 属性会强制同步重排
在 styled.xxx`...${props => /* 这里 */}` 的插值函数里，如果调用了 getBoundingClientRect()、offsetHeight 或 getComputedStyle()，浏览器会立刻 flush 当前样式并重排，只为返回一个准确值——而这个动作发生在 React 渲染阶段，打断了批量更新节奏。
- 典型陷阱：
const HeightBox = styled.div`height: ${props => props.el?.offsetHeight}px;`—— 不仅危险，而且props.el通常根本拿不到有效 DOM 引用 - 替代方案：把 layout 计算移到
useEffect或useLayoutEffect中，结果存入 state，再传给 styled 组件 - 更优解：用 CSS 自定义属性 +
calc()或clamp()替代 JS 测量，完全避开主线程 layout 强制触发
高频更新 props（如 scroll/resize）进 styled 组件极易抖动
把滚动位置、鼠标坐标、窗口尺寸这类高频变化值直接作为 props 传给 styled 组件，会导致插值函数每帧执行多次；一旦插值返回字符串不稳定（比如用了 Date.now() 或 Math.random()），styled-components 就认为样式已变，强制刷新 class 名，进而触发 DOM 重排+重绘连锁反应。
- 禁止行为：
const MovingBox = styled.div`transform: translateX(${props => props.x}px);`;然后<movingbox x="{scrollX}"></movingbox> - 推荐路径：高频动画一律走
style={{ transform: `translateX(${x}px)` }}，绕过 styled-components 缓存与插值机制 - 如需主题或断点响应，用媒体查询 +
@media块，而不是靠 JS 实时算width后传进去
真正难防的不是“写了什么”，而是“什么时候写”——比如在 useEffect 里调用 insertRule 看似安全，但如果没控制好插入时机，仍可能打乱浏览器的样式表合并策略；又比如用 shouldForwardProp 过滤掉非样式 props，却忘了它不影响插值函数执行次数。这些细节不会报错，但会在内存快照里悄悄堆起 Detached HTMLStyleElement。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
