Skip to content

Commit

Permalink
Merge branch 'master' of https://github.com/ascoders/weekly
Browse files Browse the repository at this point in the history
  • Loading branch information
ascoders committed Nov 15, 2022
2 parents 1a2a78b + c1a3a39 commit cfa7836
Showing 1 changed file with 2 additions and 2 deletions.
4 changes: 2 additions & 2 deletions 前沿技术/263.精读《我们为何弃用 css-in-js》.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ const myCss = css({
});
```

不得不的说 React 的渲染机制实在是太有问题了,如果换成 SolidJS 这个问题就好办了,因为运行时的样式代码仅会运行一次,组件重渲染也不会导致这段解析代码被重复执行,此时 css-in-js 在样式变化时再做一次精确样式更新,性能问题就可以被解决了。
不得不说 React 的渲染机制实在是太有问题了,如果换成 SolidJS 这个问题就好办了,因为运行时的样式代码仅会运行一次,组件重渲染也不会导致这段解析代码被重复执行,此时 css-in-js 在样式变化时再做一次精确样式更新,性能问题就可以被解决了。

### 换成 css modules

Expand Down Expand Up @@ -81,7 +81,7 @@ const myStyle = style({
const App = () => <div className={myStyle}/>
```

编译时 css-in-js 想要做到通用性,只能提供一个 className,这样就不受任何框架和环境的限制了,但这样也限制了声明语法的灵活性,显然不可以用内连方式定义样式
编译时 css-in-js 想要做到通用性,只能提供一个 className,这样就不受任何框架和环境的限制了,但这样也限制了声明语法的灵活性,显然不可以用内联方式定义样式

而且这种编译时的方案本质上和 css-modules 是一样的,背后都是定义了一些静态样式名,只是说这些样式问题以 `.sass` 定义还是 `.ts` 定义,如果用 `.ts` 定义,配合编译工具可以使代码原生 import 的更加舒服。

Expand Down

0 comments on commit cfa7836

Please sign in to comment.