[翻译]为什么我们放弃了使用CSS-in-JS

我是Sam,Spot的一位软件工程师,也是Emotion库第二活跃的维护者。Emotion是一个在React项目中被广泛使用的CSS-in-JS库。这篇文章将深入探究最初吸引我使用CSS-in-JS的原因,以及为什么我(及Spot团队的其他成员)又决定放弃它。

我们将从CSS-in-JS的概述开始,并简要介绍一下它的优缺点。然后,我们再深入探究在CSS-in-JS在Spot上引发的性能问题,以及如何避免它。

什么是CSS-in-JS?

顾名思义,CSS-in-JS允许你直接在JavaScript或TypeScript中写入CSS来设置你的React组件样式:

// @emotion/react (css prop), with object styles
function ErrorMessage({ children }) {
  return (
    <div
      css={{
        color: 'red',
        fontWeight: 'bold',

Electron打包React应用空白的问题

Electron的真的是够折腾的,用React写个APP,dev的时候看起来挺正常的,打包出来一片空白。

打开调试工具看了一下,发现是加载不到页面。于是把asar包拖出来解压看了一下,发现页面加载路径似乎不太对,在main.js里面调整一下:

mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${__dirname}/../build/index.html`);

顺便调整一下打包目录,目前Electron Forge是把整个项目目录都打包进去了,在forge.config.js里面:

packagerConfig: {
  ...
  "dir": "./build",
  ...
},

好了,页面倒是可以加载出来了,发现js路径不对,遗漏了一个很重要的地方。React默认使用了绝对路径,所有的引用都是相对于根目录的,所以还要改下package.json里面的配置,在根下指定:…