微信号:frontshow

介绍:InfoQ大前端技术社群:囊括前端、移动、Node全栈一线技术,紧跟业界发展步伐。

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

2018-09-15 12:21 前端之巅
作者|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

  活动推荐

前端新趋势,可以关注 QCon 全球软件开发大会,从实践中积累的前端架构经验,典型的前端框架应用经验,新型框架与设计思路三个方面探索前端研发之路。大会9 折报名中,立减 680 元。有任何问题欢迎咨询票务经理 Ring,电话:010-84782011,微信:qcon-0410

 
前端之巅 更多文章 最好的JavaScript数据可视化库都在这里了 V8十年故事:从农场诞生的星球最强JS引擎 再见,Redux! 你所不知道的Visual Studio Code GitHub:我们为什么会弃用jQuery?
猜您喜欢 京东人工智能亮相数博会 引强势围观 MySQL 8 简明指南 迎新年 学知识 抽大奖——微软虚拟学院有奖活动! 快速上手Ionic3,多平台开发一个仿“知乎”的问答社区 腾讯出了个会“打官司”的小程序