React 18 提供了一种新的 SSR 渲染模式: Streaming SSR。通过 Streaming SSR,我们可以实现以下两个功能: Streaming HTML:服务端可以分段传输 HTML 到浏览器,而不是像 React 18 以前一样,需要等待服务端渲染完成整个页面后才返回给浏览器。这样,浏览器可以更快的启动 HTML 的渲染,提高 FP、FCP 等性能指标。 Selective Hydration:在浏览器端 hydration 阶段,可以只对已经完成渲染的区域做 hydration,而不需要等待整个页面渲染完成、所有组件的 JS bundle 加载完成,才能开始 hydration。这样可以更早的对已经完成渲染的区域做事件绑定,从而让页面获得更好的可交互性。
其实,最早接触 Headless UI 是在去年,碰巧看到了一个非常前沿且优秀的组件库 ---- Chakra UI[1],这个组件库本身就是 Headless UI 的实践者,同时也是 CSS-IN-JS 的集大成者。 我当时看过之后,就对该理念产生了很大的兴趣,同时工作中也正好有机会实践(着手公司开源组件库大版本重构),因此对该理念也有一定的实践经验。 那么今天,也是想和大家分享介绍下这项还算前沿的技术,另一方面是也算是个人的一份技术总结,这里也希望感兴趣的小伙伴可以在评论区探讨。
React 最新提出了一个叫 use 的 Hook,用于在客户端消费 Promise,而 use 和其他 Hook 不同之处在于,它可以在条件语句、block 和循环里使用。除 Promise 之外,use 未来还可能用于消费 Context、store、observable 等。 与之对应的是,在服务端组件中则支持使用 async/await。这个提案本身并不是一个完整的数据获取解决方案,因为它没有解决缓存问题。wait 和 use 是用于读取 promise 异步结果的原语,后续会引入一个名为 cache 的 API 来帮助缓存数据。