该材料的作者（我们今天将发布其翻译版本）希望向Web开发人员社区介绍带样式的组件v4库的beta版。 他代表库的创建者发言，他说样式化组件现在有了一个新的全局API，用于处理样式以及对
as和
ref属性的本地支持。 该库遵循拒绝
.extend的路径，它与StrictMode React v16兼容，并且变得更好，更快和更强大。
具有样式化组件v4
为了安装样式组件的最新版本，请使用以下命令：
npm install styled-components@beta
您可以使自己熟悉该库的功能，对其进行检查，如果发现需要改进，请让开发人员知道。
在这里，您可以找到有关升级到库的新版本的说明。
这是样式组件v4.0.0-beta.0的变更日志。
考虑此样式组件发行版的主要功能：
- 减小尺寸并提高速度。 库的大小已从16.1 KB减少到不到15 KB（其最终大小取决于捆绑程序和babel插件的使用）。 安装速度提高了约25％，重新渲染速度提高了约7.5％。
- 新的
createGlobalStyle API，它是对旧的injectGlobal API的替代，并支持热重载和主题。 - 支持
as属性，这是.withComponent()一种更灵活的替代方法。
- 支持自动将代码库转换为统一
styled(Comp)格式， Comp.extend摆脱Comp.extend 。 - 与StrictMode React v16完全兼容。 此外，这意味着开发人员不得不放弃对React v15和其他旧版本的React的支持（尽管polyfill可能可以用于在React v15中组织样式化组件v4的工作）。
- 对任何样式化组件的
ref机支持，并且由于React v16，不需要使用innerRef 。
样式化组件库在beta中发布，因此使用它的人有足够的时间对更改进行压力测试，从而可以为新的类型准备辅助机制，例如类型描述和语法突出显示工具API 该库预计将保持Beta状态约一个月。
性能表现
当样式化组件的第二版发布时，我们承诺在完成核心API之后，将专注于性能。 从那时起，借助补丁程序，我们改进了库的性能，尤其是在v3.1中使性能提高了
10倍 。
样式组件性能的工作仍在继续。 由于与使用内存有关的内部优化，由于实现JS引擎和代码重构的特殊性，样式化组件v4的安装速度对于深层组件树和宽组件树都增加了约25％。 动态样式更新速度提高了约7％。 这是基于三个测试的结果对样式化组件v3和v4的性能的比较。 前两个与安装组件树的研究有关，第三个与以动态样式更新组件有关。
样式化组件v3和v4的性能比较在隔离的环境中获得的这些结果看起来令人印象深刻。 但是，将样式化组件v4与其他CSS-in-JS生态系统库进行比较将非常有趣，特别是在安装速度方面。
样式化组件v4与其他库的性能比较如您所见，样式化组件的性能看起来非常出色。 特别是，与最快的库相比，样式化组件的结果在安装和更新速度方面与其结果在标准偏差之内。 所有这些使我们可以正式声明性能不再是该库的问题。
尽管样式化组件的性能是库开发以及大量时间和精力进行改进的结果，但这并不意味着我们将不再致力于性能改进。 如果我们找到了使图书馆变得更快的机会，我们将利用这一机会。
新的全局样式API
我们已经开发了新的全局样式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> ); }
拒绝.extend和组件的“折叠”
此版本的样式化组件具有内部机制，这要归功于包装器中的样式化组件现在会自动“折叠”，从而仅允许呈现一个组件。
这对图书馆用户意味着什么？ 事实是，
StyledComp.extend API出现在库中是为了基于可扩展组件是样式化组件这一事实进行一些优化。 由于对组件的自动“折叠”进行了内部工作，因此在使用
styled(StyledComp)将自动应用与
StyledComp.extend相同的优化。 这意味着
.extend现在不是特别有用，它允许放弃此API。 结果，现在库用户可以编写更少的代码，并有机会不浪费时间开发附加的一个API。 我们相信这是非常好的。
多态性为
还有一个新功能样式组件v4，我们对此非常感兴趣。 我们正在谈论对任何样式化组件的
as属性的本地支持，这使我们能够在程序执行期间动态影响渲染。 考虑一个例子：
import styled from "styled-components" import { Link } from "react-router-dom" // <Component /> DOM 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(something)机制进行比较，则新工具将更加灵活，因为您无需提前描述替换，而且由于有了新的内部“折叠”机制，如果对基本组件进行样式设置，样式也不会丢失-组件！
import styled from "styled-components" const RedColor = styled.div` color: red; ` const BlueBackgroundRedColor = styled(RedColor)` background: blue; ` <BlueBackgroundRedColor as="span">Hello!</BlueBackgroundRedColor>
如您所见，
as属性只是一个了不起的事情，它极大地简化了应用程序中任何地方的语义HTML代码的呈现。
<div>标记的“汤”仅是合理的。
请注意，在确保在所有用例中
as属性都可以替代
.withComponent ，我们不会拒绝它。 假定此过渡期不会持续太长时间，并且在下一个主要版本中，我们将删除
.withComponent 。
React v16和ref
在切换到React v16 API的过程中，我们发现，除其他外，由于
React.forwardRef新的
React.forwardRef API，我们可以摆脱
innerRef 。 我们从来没有特别喜欢这种技术，因为它看起来像是一种不太干净的技术。 但是由于React团队的出色工作，您现在可以使用native
ref ：
import styled from "styled-components" const Component = styled.div` color: red; `
TypeScript编写器的改进
我们不直接这样做，但我们真的很喜欢新的
@ babel /预设类型脚本 。 它的存在意味着现在所有使用TypeScript编写的人都将最终能够使用babel
插件来使用样式化组件，并且具有所有有用的功能，包括使用类中的组件名称进行简化的调试，支持服务器渲染以及减小捆绑包的大小。
此外，我们已经完成了将TS类型转换为DefinitelyTyped的操作。 社区现在可以与他们一起工作，并按照自己的进度来解决打字错误，而不必与样式组件发布挂钩。 类型声明可以在
这里找到。
总结
通过该材料，您了解了样式组件v4的新beta功能以及对其进行的改进。 我们希望所有这些对使用样式化组件的人都是有用的，也许对那些打算尝试该库的人会很有趣。
亲爱的读者们！ 您是否在项目中使用样式组件库？
