styled-components v4測試版發佈：原生支持 ref，性能提升25%

styled-components v4測試版發佈：原生支持 ref，性能提升25%

作者｜Evan Jacobs
譯者｜無明
近日，styled-components v4 正式發佈測試版，新版本的主要特性包括：

• 文件更小，文件大小從 16.1KB 縮小到不足 15KB（取決於你的捆綁器和 babel 插件的使用）。在速度方面，加載速速提升約 25％，重新渲染速度提升約 7.5％；
• 全新的 createGlobalStyle API，支持重新熱重載和主題化，用於替換 injectGlobal；
• 支持“as” prop，更加靈活，用於替代.withComponent()；
• 移除 Comp.extend，可使用自動 codemod 將整個代碼庫移動到統一的 styled(Comp) 表示；
• 與 React v16 完全兼容的 StrictMode，這也意味着我們不得不放棄對 React v15 及更低版本的支持（可以通過 polyfill 在 React v15 中使用 styled-components v4）；
• 對於任何樣式組件，原生支持 ref，不再需要 innerRef；
  爲了確保人們有足夠的時間進行壓力測試，測試版時間約爲 1 個月。

  性能爲王

  在發佈 v2 時，我們承諾在確定核心 API 之後把性能放在第一位，隨後提供了各種補丁版本來提升速度，其中 v3.1 版本的速度提升了 10 倍左右。
  在新版本中，我們將繼續將這一個趨勢保持下去！由於內存使用方面的優化、JS 引擎實現細節的改進和各種重構，styled-components v4 對深度和寬度組件樹的加載速度提升了約 25％，動態樣式更新速度提升了約 7.5％：
  
  單獨來看，性能已經很棒了。現在讓我們看看 v4 與 CSS-in-JS 生態系統中其他庫的加載速度相比會怎樣：
  
  可以看到，styled-components v4 速度是超快的。在所有較快的庫中，無論是在加載還是更新速度方面，我們都處於標準偏差範圍內，說明性能已經不再是個問題！
  這是一個很大的進步，我們爲此花了很多的時間，但我們仍將繼續關注潛在的優化，進一步提升性能。
  
  
  
  
  
  

  新的全局樣式 API

  我們一直在默默地醞釀一個新的全局樣式 API。舊的 injectGlobal 存在三個問題：無法動態更新、不能重新熱加載，並且不支持基於上下文的主題化。
  我們引入了 createGlobalStyle，針對全局樣式的全新動態可更新 API！
  

  import { createGlobalStyle } from "styled-components";
  const GlobalStyle = createGlobalStyle`
  html {
  color: red;
  }
  `;
  export default function App() {
  return (
  <div>
    <GlobalStyle />
    This is my app!
  </div>
  );
  }

  有了 createGlobalStyle，全局樣式就成爲 React 組件樹的一部分。雖然這看起來似乎不是一個很大的變更，但它可以動態更新、重新熱加載和基於上下文主題化你的全局樣式。

  import { createGlobalStyle, ThemeProvider } from "styled-components";
  // 可主題化和可更新的全局樣式!
  const GlobalStyle = createGlobalStyle`
  html {
  background: ${p => p.backgroundColor}
  color: red;
  font-family: ${p => p.theme.fontFamily};
  }
  `;
  export default function App() {
  return (
  <ThemeProvider theme={{ fontFamily: "Helvetica Neue" }}>
    <GlobalStyle backgroundColor="turquoise" />
  </ThemeProvider>
  );
  }

  移除 Comp.extend

  這一版本還進行了內部重構，封裝的樣式組件現在可以自動“摺疊”，只渲染單個組件。
  我們引入了 StyledComp.extend API，因爲擴展的組件是樣式組件，所以可以對它們進行優化。因爲經過內部重構後，可以進行自動摺疊，所以使用 styled(StyledComp) 時也會自動應用 StyledComp.extend 的優化！這意味着.extend 不再是 API 的有用部分，所以我們將其移除。API 越少，需要交付的代碼就越少，一石二鳥！
  

  新的“as”多態 prop

  在這個版本中，還有一件事令我們感到振奮：樣式組件現在支持“as” prop，可以在運行時動態渲染內容！

  import styled from "styled-components"
  import { Link } from "react-router-dom"
  // <Component /> 渲染一個 div
  const Component = styled.div`
  color: red;
  `
  <Component>Hello World!</Component>
  // 也可以渲染其他 HTML 標籤或組件!
  <Component as="span">Hello World!</Component>
  <Component as={Link} to="home">Hello World!</Component>

  與現有的.withComponent() 相比，這個更靈活。況且，使用新的自動摺疊機制，如果基本組件是樣式組件，就不會丟失任何樣式！

  import styled from "styled-components"
  const RedColor = styled.div`
  color: red;
  `
  const BlueBackgroundRedColor = styled(RedColor)`
  background: blue;
  `
  <BlueBackgroundRedColor as="span">Hello!</BlueBackgroundRedColor>
  // 即使我們從渲染<RedColor />切換到渲染一個`span` ，
  // 在藍色背景上面仍然會呈現出紅色 (這是.withComponent 做不到的)

  可見，“as” prop 非常有用，可以讓你更輕鬆地在應用程序的任何位置渲染 HTML。
  請注意，我們還沒有棄用.withComponent，但我們確信“as” prop 是很好的替代品，不過.withComponent 將在下一個主要版本中移除。
  

  React v16 和 refs

  在我們內部遷移到新的 React v16 API 期間，我們還發現，innerRef 可以通過新的 React.forwardRef API 來實現。我們並不喜歡這種解決方法，因爲它帶有侵入性……不過，現在可以使用原生的 ref，這要感謝 React 團隊所做出的努力：

  import styled from "styled-components"
  const Component = styled.div`
  color: red;
  `
  // Later in your render function
  <Component ref={element => { this.myRef = element; }}

  TypeScript 改進

  雖然這與我們沒有直接的關係，但新的 @babel/preset-typescript 確實讓我們感到眼前一亮。現在，所有的 TypeScript 用戶都可以使用 styled-components babel 插件，並享受它所帶來的好處，包括更容易調試類中的組件名、服務器端呈現支持和更小的捆綁包！強烈推薦。
  我們還完成了從 TS 類型到 DefinitelyTyped 的遷移，這樣社區就可以迭代它們，並在 styled-components 的發佈週期之外按照自己的節奏修復類型錯誤。可以從 npm 上獲取 @types/styled-components。
  英文原文
  https://medium.com/styled-components/announcing-styled-components-v4-better-faster-stronger-3fe1aba1a112