技術期刊 · 天生江水向東流 | 深刻 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），不定時推送文章。