styled-components v4测试版发布:原生支持 ref,性能提高25%

styled-components v4测试版发布:原生支持 ref,性能提高25%

styled-components v4测试版发布:原生支持 ref,性能提高25%
做者|Evan Jacobs
译者|无明
近日,styled-components v4 正式发布测试版,新版本的主要特性包括:html

  • 文件更小,文件大小从 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 速度是超快的。在全部较快的库中,不管是在加载仍是更新速度方面,咱们都处于标准误差范围内,说明性能已经再也不是个问题!
    这是一个很大的进步,咱们为此花了不少的时间,但咱们仍将继续关注潜在的优化,进一步提高性能。react

    新的全局样式 API

    咱们一直在默默地酝酿一个新的全局样式 API。旧的 injectGlobal 存在三个问题:没法动态更新、不能从新热加载,而且不支持基于上下文的主题化。
    咱们引入了 createGlobalStyle,针对全局样式的全新动态可更新 API!typescript

    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 组件树的一部分。虽然这看起来彷佛不是一个很大的变动,但它能够动态更新、从新热加载和基于上下文主题化你的全局样式。npm

    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,能够在运行时动态渲染内容!babel

    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() 相比,这个更灵活。何况,使用新的自动折叠机制,若是基本组件是样式组件,就不会丢失任何样式!react-router

    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 将在下一个主要版本中移除。app

    React v16 和 refs

    在咱们内部迁移到新的 React v16 API 期间,咱们还发现,innerRef 能够经过新的 React.forwardRef API 来实现。咱们并不喜欢这种解决方法,由于它带有侵入性……不过,如今可使用原生的 ref,这要感谢 React 团队所作出的努力:dom

    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-3fe1aba1a112ide

相关文章
相关标签/搜索