蒲公英 · 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 也许是更好的选择。
十分钟弄懂用户画像
梗概:这篇文章给我们介绍了什么是用户画像,为什么需要用户画像,用户画像对我们有什么意义,以及用户画像标签算法,让我们对用户画像有了比较全面清晰的认知。
推荐语:用户画像是在构建推荐系统中,一项是非常基础的技术,可以说是个性化推荐服务的前提。用户画像必须深入具体的业务场景,不同业务场景用户画像是不一样的,但是构建用户画像的算法思路是大同小异。掌握了这些技术方法,深入理解业务场景,是做好用户画像的两个大前提。
「蒲公英」期刊,每周更新,我们专注于挖掘「基础技术、工程化、跨端框架技术、图形编程、服务端开发、桌面开发、人工智能、设计哲学、前端框架」等多个大方向的业界热点,并加以专业的解读;不仅如此,我们还会推介精选凹凸技术文章,向大家呈现团队内的研究技术方向。
抬头仰望,蒲公英的种子会生根发芽,如夏花绚烂;格物致知,我们登高远眺、沧海拾遗,以求积硅步而至千里。
欢迎关注凹凸实验室博客:aotu.io
或者关注凹凸实验室公众号(AOTULabs),不定时推送文章。