为什么我们正在放弃 CSS-in-JS( 二 ) _CSS

CSS-in-JS 让 React DevTools 变得难看。每一个使用 css prop 的 react 元素，Emotion 都会渲染成 <EmotionCssPropInternal> 和 <Insertion> 组件。如果你使用很多的 css prop，那么你会在 React DevTools 看到下面这样的场景

文章插图

频繁的插入 CSS 样式规则会迫使浏览器做更多的工作。 React 团队核心成员&React Hooks 设计者 Sebasian 写了一篇关于 CSS-in-JS 库如何与 React 18 一起工作的文章。他特别说到

在 concurrent 渲染模式下，React 可以在渲染之间让出浏览器的控制权。如果你为一个组件插入一个新的 CSS 规则，然后 React 让出控制权，浏览器会检查这个新的规则是否作用到了已有的树上。所以浏览器重新计算了样式规则。然后 React 渲染下一个组件，该组件发现一个新的规则，那么又会重新触发样式规则的计算。

实际上 React 进行渲染的每一帧，所有 DOM 元素上的 CSS 规则都会重新计算。这会