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％：
  
  单独来看，性能已经很棒了。现在让我们看看 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