技術期刊 · 天生江水向東流 | 深入 React 18 工作組;Google 出品的 CSS 課程;輕量級 Postman 工具;十分鐘弄懂用戶畫像

HEADER

蒲公英 · 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 讓我們能夠把某些渲染(渲染邏輯重的或網絡延遲嚴重)的優先級降低,避免阻塞交互性渲染(如點擊、輸入引起的渲染),提高用戶體驗。以往我們常常使用 setTimeoutdebounce 等手段優化阻塞性渲染,但需要注意 startTransition 和它們之間的區別(可感知 Pending 狀態等)。相信 React 18 廣泛普及後,這是一個非常重要而且常用的優化手段。

輕量級 Postman 工具

梗概:Postman 替代工具,輕量級 Rest Client,目前在 VSCode 插件市場中有接近 16w 下載量,入股不虧!

推薦語:Postman 畢竟是付費軟件,日常的業務開發場景下,開發者往往只需要輕量的測試 API 的工具,Thunder Client for VSCode 也許是更好的選擇。

十分鐘弄懂用戶畫像

梗概:這篇文章給我們介紹了什麼是用戶畫像,爲什麼需要用戶畫像,用戶畫像對我們有什麼意義,以及用戶畫像標籤算法,讓我們對用戶畫像有了比較全面清晰的認知。

推薦語:用戶畫像是在構建推薦系統中,一項是非常基礎的技術,可以說是個性化推薦服務的前提。用戶畫像必須深入具體的業務場景,不同業務場景用戶畫像是不一樣的,但是構建用戶畫像的算法思路是大同小異。掌握了這些技術方法,深入理解業務場景,是做好用戶畫像的兩個大前提。

「蒲公英」期刊,每週更新,我們專注於挖掘「基礎技術工程化跨端框架技術圖形編程服務端開發桌面開發人工智能設計哲學前端框架」等多個大方向的業界熱點,並加以專業的解讀;不僅如此,我們還會推介精選凹凸技術文章,向大家呈現團隊內的研究技術方向。

擡頭仰望,蒲公英的種子會生根發芽,如夏花絢爛;格物致知,我們登高遠眺、滄海拾遺,以求積硅步而至千里。

蒲公英 · JELLY技術期刊貢獻指南

FOOTER

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章