vivo TWS Air開箱體驗(yàn)：真輕 臻好聽
在vivo S15系列新機(jī)的發(fā)布會(huì)上，vivo的最新款真無線藍(lán)牙耳機(jī)vivo TWS Air也一同發(fā)布，本次就這款耳機(jī)新品給大家?guī)硪粋€(gè)簡單的分享。外包裝盒上，vivo TWS Air保持了vivo自家產(chǎn)
有件事讓我感覺自己真的老了：React 今年已經(jīng) 10 歲了。
自從 React 首次被引入以來，經(jīng)歷了幾次演變。 React 團(tuán)隊(duì)并不羞于改變：如果他們發(fā)現(xiàn)了更好的問題解決方案，就會(huì)采用。
React 團(tuán)隊(duì)推出了 React 服務(wù)端組件（React Server Components），這是最新的編寫范式。 React 組件有史以來第一次可以專門在服務(wù)器上運(yùn)行。
網(wǎng)上對(duì)這個(gè)概念有太多不理解。許多人對(duì)服務(wù)端組件是什么、如何工作、有什么好處以及是如何與服務(wù)器端渲染等內(nèi)容結(jié)合使用存在很多疑問。
我一直在使用 React 服務(wù)端組件進(jìn)行大量實(shí)驗(yàn)，也回答了我自己產(chǎn)生的很多問題。我必須承認(rèn)，我對(duì)這些東西比我預(yù)想的要興奮得多，因?yàn)樗娴暮芸幔?span style="display:none">7Ru28資訊網(wǎng)——每日最新資訊28at.com
今天，我將幫助你揭開 React 服務(wù)端組件的神秘面紗，回答你可能對(duì) React 服務(wù)端組件存在的許多問題！
由于實(shí)際場景中，React 服務(wù)端組件通常與服務(wù)端渲染（Server Side Rendering，簡稱 SSR）配合使用，因此預(yù)先了解服務(wù)端渲染的工作原理會(huì)很有幫助。當(dāng)然，如果你已經(jīng)很熟悉 SSR 了，則可以跳過本節(jié)的學(xué)習(xí)。
在我 2015 年第一次使用 React 時(shí)，那時(shí)候的大多數(shù) React 項(xiàng)目都還采用“客戶端渲染”策略。
在客戶端渲染模式下，用戶會(huì)先收到下面這樣一個(gè)比較簡單的網(wǎng)頁。
<!DOCTYPE html><html> <body> <div id="root"></div> <script src="/static/js/bundle.js"></script> </body></html>bundle.js 包含整個(gè)項(xiàng)目初始化和運(yùn)行階段的所有代碼。包括 React、其他三方依賴以及我們自己的業(yè)務(wù)代碼。
JS 文件下載并解析后，React 會(huì)立即介入，準(zhǔn)備好渲染應(yīng)用所需要的 DOM 節(jié)點(diǎn)，并插入到空的 <div id="root"> 里。到這里，用戶就得到可以交互的頁面了。
雖然這個(gè)空的 HTML 文檔會(huì)很快接收，但 JS 文件的下載和解析是需要一些時(shí)間的，另外隨著我們項(xiàng)目規(guī)模的擴(kuò)大，JS 文件本身的體積可能也在不斷變大。
在客戶端接收到 HTML 文檔，到 JS 文件處理結(jié)束的中間階段，用戶通常會(huì)面臨白屏問題，這種體驗(yàn)就比較糟糕了。
服務(wù)端渲染就能有效的避免這種體驗(yàn)。服務(wù)端渲染會(huì)將我們首屏要展示的 HTML 內(nèi)容在服務(wù)端預(yù)先生成，再發(fā)送到客戶端。這樣，客戶端在接收到 HTML 時(shí)，就能渲染首屏內(nèi)容，也就不會(huì)遇到白屏問題了。
當(dāng)然，服務(wù)端渲染的 HTML 網(wǎng)頁同樣會(huì)包含 <script> 標(biāo)簽，因?yàn)榘l(fā)送的首屏內(nèi)容還需要交由 React 托管，附加交互能力。具體來說：與客戶端從頭構(gòu)建 DOM 不同，服務(wù)端渲染模式下，React 會(huì)利用現(xiàn)有的 HTML 結(jié)構(gòu)進(jìn)行構(gòu)建，并為 DOM 節(jié)點(diǎn)附加交互能力，以便響應(yīng)用戶操作。這個(gè)過程被稱為“水合（hydration）”。
我很喜歡 React 核心團(tuán)隊(duì)成員 Dan Abramov 對(duì)這一過程的通俗解釋：
水合（Hydration）就類似使用交互和事件處理程序的“水”澆到“干”的 HTML 上。
JS 包下載后，React 將快速運(yùn)行我們的整個(gè)應(yīng)用程序，構(gòu)建 UI 的虛擬草圖，并將其“擬合”到真實(shí)的 DOM 節(jié)點(diǎn)、附加事件處理程序、觸發(fā) effect 等。
簡而言之，SSR 就是服務(wù)器生成初始 HTML，這樣用戶在等待 JS 處理過程中，不會(huì)看到白屏。另外，客戶端 React 會(huì)接手服務(wù)器端 React 的工作，為 DOM 加入交互能力。
本文鏈接：http://m.www897cc.com/showinfo-26-82754-0.html我們一起理解 React 服務(wù)端組件
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)