styled-components v4測試版釋出:原生支援 ref,效能提升25%

語言: CN / TW / HK

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%:
    styled-components v4測試版釋出:原生支援 ref,效能提升25%
    單獨來看,效能已經很棒了。現在讓我們看看 v4 與 CSS-in-JS 生態系統中其他庫的載入速度相比會怎樣:
    styled-components v4測試版釋出:原生支援 ref,效能提升25%
    可以看到,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