[译] styled-components v3.1.0

2018-02-06 09:44:04来源:https://juejin.im/post/5a7576c36fb9a0633b20e462作者:稀土掘金人点击

分享

一种新的 CSS 注入机制意味着在生产环境中更快的客户端渲染,同时流式服务器端渲染使得首字节时间(TTFB)更快。


在生产环境中更快捷的CSS注入

CSS注入早就不是什么新鲜事了。早在一年半以前,Sunil Pai就发现了一个鲜为人知的DOM API: insertRule 。它使我们能用JS的方式把CSS快速注入到DOM当中。唯一的缺点是这些样式不能在浏览器的开发者工具中编辑。


当 Glen 和 Max 第一次写出styled-components的时候,他们完全是从开发者的体验出发的。对于小型应用来说性能问题还不明显,所以他们决定不再使用 insertRule 。但是当越来越多的人开始使用,并且使用在大型应用程序中时,样式注入就成了瓶颈,特别对于一些高度动态的案例来说。


多亏了 Reddit 的前端工程师 Ryan Schwers,styled-components 3.1.0版本在生产环境中默认使用 insertRule 。


我们将该版本与之前的版本(3.0.2)做了些对比,结果远超预期:





Mount的时间减少了将近10倍,而重新渲染的时间减少了将近20倍!


注意,这样的比较是基于压力测试,不一定适用于真实应用。可能你的应用渲染速度不一定能提升10倍,但是在我们的一个应用中,首次渲染时间减少了好几百毫秒。


下图是styled-components与其它一些主流的React CSS-in-JS框架的比较(淡红色是3.0.2版本,深红色是3.1.0版本):





尽管目前styled-components还不是最快的,但比最快的也慢不了多少,至少之前的瓶颈也已经不复存在了。这样的结果实在是鼓舞人心,我们也非常希望得到各位用户的反馈。


流式服务器端渲染

流式服务器端渲染的概念实在React V16中引进的。它允许React还在渲染的时候,服务端仍然能发送HTML,这使得首字节时间更快,并且Node服务器能更容易的处理背压(Back-pressure)。


这与 CSS-in-JS 不太搭: 通常,我们在React完成渲染后,将所有组件的样式放在 <style> 标签中,然后插入到 <head> 里面。而在流式情况下,在任何组件都没被渲染的时候, <head> 已经发送给用户了,这时候我们就无法插入任何东西了。


解决方案就是在渲染组件的时候,把HTML和样式混在一起,而不是等到最后,一次性的插入所有的组件。但是这样会使HTML和 style 标签都糅杂在一起,所以我们最后还是要在重注入(rehydration)之前把所有的 style 都合并到 head 里面。


我们已经实现了这一点,你现在可以同时使用流式服务器端渲染和styled-components。就像这样:


import { renderToNodeStream } from 'react-dom/server'
import styled, { ServerStyleSheet } from 'styled-components'
res.write('<!DOCTYPE html><html><head><title>My Title</title></head><body><div id="root">')
const sheet = new ServerStyleSheet()
const jsx = sheet.collectStyles(<App />)
// Interleave the HTML stream with <style> tags
const stream = sheet.interleaveWithNodeStream(
renderToNodeStream(jsx)
)
stream.pipe(res, { end: false })
stream.on('end', () => res.end('</div></body></html>'))

然后在客户端,我们必须调用 consolidateStreamedStyles() API来为React的重注入(rehydration)做准备:


import ReactDOM from 'react-dom'
import { consolidateStreamedStyles } from 'styled-components'
/* Make sure you call this before ReactDOM.hydrate! */
consolidateStreamedStyles()
ReactDOM.hydrate(<App />, rootElem)

好消息!


如果你使用的是v2或者甚至v1,不用担心,新版本完全是向后兼容的。并且你也可以无缝的升级至新版本。新版本中有很多的更新,希望你和你的用户能够喜欢。


最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台