css-in-js本身不直接触发重绘，但动态样式函数未缓存、css返回新引用、父组件透传新引用均会间接导致频繁重渲染和重绘；应分别用模板字符串/ usememo / usecallback / react.memo 保障引用稳定。
React 中 CSS-in-JS（如 styled-components、Emotion）本身不直接触发重绘，但不当使用会间接导致组件频繁重渲染，进而引发不必要的样式计算和重绘。关键问题不在“CSS”，而在“JS”部分如何生成样式——尤其是动态样式依赖 props 或状态时，容易破坏引用稳定性。
styled-components 动态样式函数每次返回新实例
当你用函数形式写动态样式（styled.div 接收一个函数），该函数在每次父组件渲染时都会重新执行，即使 props 没变，也会生成新的样式规则和 class 名，触发浏览器样式重计算。
- 错误写法：
const Button = styled.button(({ disabled }) => ({ opacity: disabled ? 0.5 : 1 }));—— 每次父组件 render，这个箭头函数都新建一次，styled-components 无法复用缓存的样式规则 - 正确做法：改用属性选择器或静态映射，例如
const Button = styled.button`opacity: ${props => props.disabled ? 0.5 : 1};`（注意是模板字符串，不是函数调用）；或者更稳妥地，用css+useMemo提前计算样式对象 - 若必须用函数组件式写法（比如需要复杂逻辑），需确保函数本身是稳定引用：
const styleFn = useCallback((props) => ({ opacity: props.disabled ? 0.5 : 1 }), []); const Button = styled.button(styleFn);
Emotion 的 css 函数未用 useMemo 缓存对象
css 是 Emotion 提供的生成样式对象的工具，但它返回的是新对象引用。如果在组件内直接调用 css({ opacity: 0.5 })，每次渲染都会产生新引用，传给 className 后，即使样式内容相同，React 也会认为 class 属性变了，可能触发重绘（尤其配合 shouldComponentUpdate 或 React.memo 失效时）。
- 常见陷阱：
const className = css({ opacity: isDisabled ? 0.5 : 1 });—— 每次渲染都新建对象 - 修复方式：用
useMemo缓存结果：const className = useMemo(() => css({ opacity: isDisabled ? 0.5 : 1 }), [isDisabled]); - 注意：不要把整个
css调用放在useCallback里返回函数，css本就是纯函数，重点是缓存其返回值
父组件重渲染导致 styled 子组件无意义刷新
即使 styled 组件自身 props 没变，只要父组件重渲染并向下透传了新引用（比如内联对象、未 memo 化的函数），React.memo 就会失效，子组件照样执行 render，进而触发 styled-components 再次比对样式、挂载/卸载 class —— 这些过程虽轻量，但在列表项多或动画频繁时会累积成明显重绘抖动。
- 典型场景：父组件中写了
style={{ color: 'red' }}或onClick={() => doSomething()}并传给 styled 子组件 - 解法组合：
useMemo缓存对象/数组类 props；useCallback缓存函数类 props；对 styled 子组件本身加React.memo（注意它默认只浅比较 props，复杂对象仍需自定义areEqual） - 特别提醒：styled-components 的底层组件默认不带
React.memo，你得自己包一层，例如export default memo(StyledButton)
真正难防的不是 CSS 本身，而是 JS 层面对样式的“动态组装”方式。一旦样式计算逻辑混入组件 render 流程，又没做引用控制，就会像毛细血管一样把重渲染扩散到视觉层。最有效的防线是三层隔离：用 useMemo 锁住样式对象、用 useCallback 锁住事件函数、用 React.memo 锁住组件实例——三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
