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

2020/12/22 12:49
阅读数 54

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



展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部