技术期刊 · 天生江水向东流 | 深入 React 18 工作组;Google 出品的 CSS 课程……

蒲公英 · JELLY技术期刊 Vol.41

虚实如潮起潮落，阴阳如日出日落，万事万物都有其规律，就好像我们学习需要有一个渐进的过程；产品会根据用户画像来规划整个项目的周期；开发测试的时候希望有趁手的工具……

这些规律对于前端开发也是一样，前端框架的迭代也是会一直持续迭代的，比方说 React 17 发布之后，React 18 alpha 版本的到来也不过是顺其自然的事情，关于 React 18 新特性的介绍、设计原理解析等内容也在社区中被大家不断探讨，很多特性和思考哪怕最终不会成为 React 18 中呈现，也十分值得了解和学习。

观海志

登山则情满于山，观海则意溢于海

Google 出品的 CSS 课程

梗概：本课程将系统地介绍 CSS 基础，适用于初学者和高阶开发人员，通过学习课程的各个模块，您将会了解 CSS 的核心概念，并且知道如何在项目中有效地运用。

推荐语：Google 出品必属精品，CSS 作为前端最基础的技能，跟着 Una Kravets 大神重新学习 CSS，大概率会有新的收获。另外，安利 Una Kravets 大神的播客「The CSS Podcast」

React 18 更极致的批处理优化

梗概：以往 React 在某些情况下会对多个更新动作进行批处理，最终只重新渲染一次，优化更新性能。React 18 默认会进行更多的批处理操作，开发者无需再调用 unstable_batchedUpdates 手动启动批处理。Dan 在文中详细讲解了批处理是什么，它当前是怎么工作的，React 18 中又带来了什么变化，以及潜在的 Breaking Changes。

推荐语：如果你不了解当前 React 批处理的具体行为，不清楚为什么事件回调中多个 setState 会被合并，而事件回调中调用 setTimeout 里的 setState 又不会被合并，这篇文章将会很好地为你答疑解惑。此外，React 18 最近发布了 alpha 版本，如果你对 React 18 的新特性有兴趣，可以浏览 React 18 工作组，这里汇集 React 团队对 React 18 新特性的介绍、设计原理解析等内容。

深入 React 18 的 Suspense SSR 架构

梗概：React 18 将会推出全新的 Suspense SSR 架构，这一特性汇聚了 React 团队多年的心血，能显著提升 React SSR 的性能和用户体验。Dan 在文章中详细讲解了 Suspense SSR 的设计目的、两大特性以及整体架构设计。文章图文并茂，能让读者学习到 SSR 的原理、存在的问题和 Suspense SSR 所带来的改进。

推荐语：尽管引入 Suspense 的最初目的在于改变异步加载的用户体验，但一直以来它只能用于在前端配合 React.lazy 进行使用。这将会在 React 18 中得到根本的改变，Suspense 能把应用拆分为独立的小块，在服务端借助 pipeToNodeWritable 实现流式推送，在浏览器借助 Concurrent Mode 根据优先级进行 hydrate。这样我们能够对 SSR 的内容进行精细化控制，解决以往服务端全量传输、客服端全量 hydrate 带来的阻塞性问题，带来类似 BigPipe 的功能，显著提升用户体验。

React 18 新特性：startTransition

梗概：按紧急程度划分，React 的渲染可以分为两类：Urgent updates 和 Transition updates，在 React 18 中所有的更新默认为 Urgent updates。文章以一个输入框的例子，描述了 startTransition 是如何通过改变渲染优先级到 Transition updates，从而解决 UI 阻塞问题，进而提高用户体验的。

推荐语：自 Concurrent Mode 概念推出以来，我们了解到渲染可以是有优先级、可中断的。而 startTransition API 让我们能够把某些渲染（渲染逻辑重的或网络延迟严重）的优先级降低，避免阻塞交互性渲染（如点击、输入引起的渲染），提高用户体验。以往我们常常使用 setTimeout、debounce 等手段优化阻塞性渲染，但需要注意 startTransition 和它们之间的区别（可感知 Pending 状态等）。相信 React 18 广泛普及后，这是一个非常重要而且常用的优化手段。

轻量级 Postman 工具

梗概：Postman 替代工具，轻量级 Rest Client，目前在 VSCode 插件市场中有接近 16w 下载量，入股不亏！

推荐语：Postman 毕竟是付费软件，日常的业务开发场景下，开发者往往只需要轻量的测试 API 的工具，Thunder Client for VSCode 也许是更好的选择。

十分钟弄懂用户画像

梗概：这篇文章给我们介绍了什么是用户画像，为什么需要用户画像，用户画像对我们有什么意义，以及用户画像标签算法，让我们对用户画像有了比较全面清晰的认知。

推荐语：用户画像是在构建推荐系统中，一项是非常基础的技术，可以说是个性化推荐服务的前提。用户画像必须深入具体的业务场景，不同业务场景用户画像是不一样的，但是构建用户画像的算法思路是大同小异。掌握了这些技术方法，深入理解业务场景，是做好用户画像的两个大前提。

「蒲公英」期刊，每周更新，我们专注于挖掘「基础技术、工程化、跨端框架技术、图形编程、服务端开发、桌面开发、人工智能、设计哲学、前端框架」等多个大方向的业界热点，并加以专业的解读；不仅如此，我们还会推介精选凹凸技术文章，向大家呈现团队内的研究技术方向。

抬头仰望，蒲公英的种子会生根发芽，如夏花绚烂；格物致知，我们登高远眺、沧海拾遗，以求积硅步而至千里。

蒲公英 · JELLY技术期刊贡献指南

欢迎关注凹凸实验室博客：aotu.io

或者关注凹凸实验室公众号（AOTULabs），不定时推送文章。