第二十四周

作者 Sam 是 Spot 的工程师，同时也是 Emotion 的第二大活跃维护者。这篇文章深入探讨了 CSS-in-JS 的优缺点，以及他和他团队的成员为啥决定放弃他。

优点：

1、默认局部样式（当然，css modules 也可以）
2、组织上样式和组件放一起（当然，css modules 也可以，只是不在同一个文件里）
3、可以在样式中使用 JavaScript 变量

缺点：

1、增加了运行时开销。因为必须把样式序列化为可以插入到 HTML 里的普通 CSS，但是这个影响大吗？
2、增加了 bundle 尺寸。比如 Emotion 7.9 kB minzipped，styled-components 12.7 kB。
3、让 React DevTools 变得混乱。比如用 Emotion 时会看到大量的 EmotionCssPropInternal 和 Insertion 组件。
4、其他问题，包括 React 并发模式下的性能问题、SSR 问题、多实例问题、样式插入顺序问题、SSR 和 React 17 & React 18 的兼容问题、TypeScript 类型问题等。

性能问题：

1、序列化的过程中，还会计算出 CSS 类名的的哈希值，比如 css-12nl2r3
2、序列化是在 React 渲染内还是外？默认是在渲染内，那每次渲染时都会重复执行，性能成本就很高；通过 @emotion/react 的 css 函数可将其挪到渲染外，在模块加载时做一次性的序列化，但要注意这种做法的缺点是，无法在样式中访问 props，损失 css-in-js 的一大优势
3、额外的一点要注意的是，React 严格模式 + 渲染内，会让渲染时间翻倍
4、作者用 sass 代替 emotion（渲染内）进行重写，让会员列表组件的单次渲染时间从 54.3ms 降低到 27.7ms，减少了 48%

那他们的选择是什么？

1、sass + css modules，除了不能满足优点 3，其他一切顺利


来源：https://www.yuque.com/chencheng/mdh-weekly/kcm612

import { ChiselEntity } from '@chiselstrike/api'

export class BlogPost extends ChiselEntity {
  title: string
  cover: string
  content: string
  publishedAt: number = Date.now()
  updatedAt?: number
}

export default BlogPost.crud()

// 来源：https://www.yuque.com/chencheng/mdh-weekly/kcm612