引言

styled-components 是一個流行的 React 庫，一個 CSS in JS 樣式框架，它使用 JavaScript 中的標記模板字面量和 CSS 的強大功能來提供一個平臺，允許編寫實際的 CSS 來設置 React 組件的樣式，同時兼顧開發(fā)人員體驗和性能。

基本上是在編寫 CSS，但使用的是 Javascript。實際上可以命名自己的標簽，以便更容易識別它們。可以使用 Javascript 更改屬性的值，這非常適合具有動態(tài)內容的應用程序。

官方網站：styled-components.com/

下面是一段使用的代碼：

const Button = styled.a`
  /* This renders the buttons above... Edit me! */
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
  background: transparent;
  color: white;
  border: 2px solid white;
  /* The GitHub button is a primary button
   * edit this to target it specifically! */
  ${props => props.primary && css`
    background: white;
    color: black;
  `}
`

styled-components 的痛點

• 一個額外的包裹
• 更大的 JS 包
• 影響 CSS 性能（特定環(huán)境）
• CSS文件和JS文件的處理方式不一樣

現在使用谷歌瀏覽器開發(fā)工具 Lighthouse 來對比一下樣式組件性能和模塊化CSS的性能。測試的環(huán)境將模擬安卓環(huán)境、網絡設置為慢速3G模式、CPU設置為 4 核。

開始之前先簡單介紹幾個前端性能指標：

• FCP：First Contentful Paint 首次內容繪制，指瀏覽器渲染出第一個內容的時間，內容可以是文本、img標簽、SVG元素等，但是不包括 iframe 和白色背景的 Canvas 元素。
• SI：Speed Index 首屏展現平均值，這是 Lighthouse 的六項性能指標之一。
• LCP：Largest Contentful Paint 最大內容繪制，指可視區(qū)內容最大的可見元素出現在屏幕上的時間，衡量加載性能的核心指標。
• TTI：Time to Interactive 可交互時間，該指標用于測量頁面從開始加載到主要子資源完成渲染，并能夠快速、可靠地響應用戶輸入所需的時間。

styled-components 性能

• 平均性能范圍：13809 毫秒
• FCP：2.2
• SI：9.1
• LCP：13.1
• TTI：13.2

模塊化 CSS 性能

• 平均性能范圍：8995 毫秒
• FCP：2.1
• SI：7.6
• LCP：12
• TTI：12.5

從上述兩組數據看到，在平均性能范圍內，styled-components 節(jié)省了 4814 毫秒！考慮到 CSS 規(guī)則根本沒有改變這一事實，速度指數和其他指標的提升也相當大。上述性能數據是有一定的前提環(huán)境，但從官方的介紹來看，整體性能還是不錯的。

結論

可以在 React 中使用這兩種技術并創(chuàng)建令人驚嘆的WEB應用，這只是為正確的工作選擇正確的工具的問題。如果有一個高度可定制的儀表板將代碼庫更改為模塊化 CSS 可能沒有意義。然而，如果用戶來自移動設備，建議嘗試看看WEB應用使用模塊化 CSS 的速度有多快。最終選用什么方式還有其他的決定因素，性能只是其中之一。