做者|Evan Jacobs
译者|无明
近日,styled-components v4 正式发布测试版,新版本的主要特性包括:html
在发布 v2 时,咱们承诺在肯定核心 API 以后把性能放在第一位,随后提供了各类补丁版原本提高速度,其中 v3.1 版本的速度提高了 10 倍左右。
在新版本中,咱们将继续将这一个趋势保持下去!因为内存使用方面的优化、JS 引擎实现细节的改进和各类重构,styled-components v4 对深度和宽度组件树的加载速度提高了约 25%,动态样式更新速度提高了约 7.5%:
单独来看,性能已经很棒了。如今让咱们看看 v4 与 CSS-in-JS 生态系统中其余库的加载速度相比会怎样:
能够看到,styled-components v4 速度是超快的。在全部较快的库中,不管是在加载仍是更新速度方面,咱们都处于标准误差范围内,说明性能已经再也不是个问题!
这是一个很大的进步,咱们为此花了不少的时间,但咱们仍将继续关注潜在的优化,进一步提高性能。react
咱们一直在默默地酝酿一个新的全局样式 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> ); }
这一版本还进行了内部重构,封装的样式组件如今能够自动“折叠”,只渲染单个组件。
咱们引入了 StyledComp.extend API,由于扩展的组件是样式组件,因此能够对它们进行优化。由于通过内部重构后,能够进行自动折叠,因此使用 styled(StyledComp) 时也会自动应用 StyledComp.extend 的优化!这意味着.extend 再也不是 API 的有用部分,因此咱们将其移除。API 越少,须要交付的代码就越少,一石二鸟!服务器
在这个版本中,还有一件事令咱们感到振奋:样式组件如今支持“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 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; }}
虽然这与咱们没有直接的关系,但新的 @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