溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“React SSR架構(gòu)Streaming Render與Selective Hydration源碼分析”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當(dāng)，希望這篇“React SSR架構(gòu)Streaming Render與Selective Hydration源碼分析”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。
以下 Demo 使用的 react 及 react-dom 版本為 16.14.0
假設(shè)我們有如下應(yīng)用：
import React from 'react'
const Item = () => {
const start = Date.now()
// 人為增加該組件的渲染時間
while (Date.now() - start < 2) {}
return <li>a</li>
}
const App = () => {
return (
<ul>
List:
{[...new Array(3700)].map((_, i) => {
return <Item />
})}
</ul>
)
}
export default App我們使用 renderToString 來進行服務(wù)端渲染：
app.get('/string', async (req, res) => {
const markup = renderToString(<App />)
res.end(`
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
li {
display: inline-block;
}
</style>
</head>
<body>
<div id="root">${markup}</div>
</body>
</html>
`)
})通過瀏覽器訪問，可以看到需要等待比較長的時間頁面才顯示出所有內(nèi)容
我們換成 renderToNodeStream 再試一試：
app.get('/node_stream', (req, res, next) => {
res.write(`<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
li {
display: inline-block;
}
</style>
</head>
<body>
<div id="root">`)
const stream = renderToNodeStream(<App />)
stream.pipe(res, {end: false})
stream.on('end', () => {
res.write(`</div>
</body>
</html>`)
res.end()
})
})可以看到瀏覽器中先顯示了一部分內(nèi)容，然后才顯示所有內(nèi)容
這樣，當(dāng)用戶訪問一個大型的 React 頁面時，可以讓其盡早地看到一部分內(nèi)容，從而提供一個比較好的用戶體驗。
其原理主要是利用了 http 的 Transfer-Encoding: chunked 響應(yīng)頭。
那么，React 每次返回多少內(nèi)容呢？通過斷點調(diào)試可以知道，這個值是 16 KB。但是實際返回的長度可能會略大于 16 KB，因為 React 總是會完整的返回標(biāo)簽，比如 </li>，而不是拆成兩部分 </ 和 li>。
為了能夠讓開發(fā)更好的控制流式渲染每次返回的內(nèi)容，我們可以結(jié)合 Suspense，但是由于 16 版本不支持 SSR 使用 Suspense，所以接下來我們換成 v18.2.0 繼續(xù)我們的實驗。
假設(shè)我們有如下應(yīng)用，期待的效果是用戶先看到 List:Loading，4 秒后顯示 List:a。
import React, {Suspense} from 'react'
const Item = ({index}) => {
return 'a'
}
const Comp = React.lazy(
() =>
new Promise((resolve, reject) => {
setTimeout(() => {
resolve({default: Item})
}, 4000)
})
)
const App = () => {
return (
<ul>
List:
<Suspense fallback='Loading'>
<Comp />
</Suspense>
</ul>
)
}
export default App我們先用 renderToNodeStream 試試，可以看到，頁面并沒有像我們所期待的那樣，而是一開始顯示空白，4 秒后才顯示 List:a，這實際上已經(jīng)失去 Streaming Render 的功能了，所以這個函數(shù)在 React 18 中被標(biāo)記為了 deprecated，使用 renderToPipeableStream 來替代。
我們換成 renderToPipealbeStream 就可以看到我們期望的效果了
其原理也很簡單，第一次返回的內(nèi)容為：
<ul> List:<!--$?--><template id="B:0"></template >Loading<!--/$--> </ul>
第二次返回的內(nèi)容為：
<div hidden id="S:0">a<!-- --></div>
<script>
function $RC(a, b) {
a = document.getElementById(a)
b = document.getElementById(b)
b.parentNode.removeChild(b)
if (a) {
a = a.previousSibling
var f = a.parentNode,
c = a.nextSibling,
e = 0
do {
if (c && 8 === c.nodeType) {
var d = c.data
if ('/$' === d)
if (0 === e) break
else e--
else ('$' !== d && '$?' !== d && '$!' !== d) || e++
}
d = c.nextSibling
f.removeChild(c)
c = d
} while (c)
for (; b.firstChild; ) f.insertBefore(b.firstChild, c)
a.data = '$'
a._reactRetry && a._reactRetry()
}
}
$RC('B:0', 'S:0')
</script>其中 <script> 中的代碼主要功能是將 <template id="B:0"></template>Loading 用 <div hidden id="S:0"> 中的內(nèi)容來替換。
這樣，React 不用等待整個應(yīng)用的數(shù)據(jù)全部準(zhǔn)備好才開始返回 HTML 內(nèi)容給用戶了，從而解決了第一個問題：“必須獲取到所有數(shù)據(jù)以后，才能返回內(nèi)容”。
以下 Demo 使用的 react 及 react-dom 版本為 18.2.0
我們改寫一下我們的例子，來看看 React 是怎么解決第二個問題的：
import React, {Suspense} from 'react'
const Comp = React.lazy(() => import('./Item')) // Item.js 是一個非常大的文件，大于 600 KB
const App = () => {
return (
<ul>
<Suspense fallback='Loading...'>
<Comp />
</Suspense>
<button
style={{position: 'absolute', top: '10px', zIndex: '1'}}
onClick={() => window.alert('click!')}>
Click Me
</button>
</ul>
)
}
export default App這個例子中 Item.js 會被單獨打包成一個 chunk，我們?nèi)匀皇褂?renderToPipeableStream 來進行渲染，可以看到在 Item.js 這個 chunk 加載完成前，button 已經(jīng)完成了注水：
這樣，第二個問題：“必須加載到所有 JS 代碼后，才能開始進行注水” 也解決了。
為了說明第三個問題，我們先準(zhǔn)備一下我們的 Demo：
// App.js
import React, {Suspense} from 'react'
const Comp = React.lazy(() => import('./ExpensiveComp'))
const Button = React.lazy(() => import('./Button'))
const App = () => {
return (
<div>
<Suspense fallback={<div>Loading Comp!</div>}>
<Comp />
</Suspense>
<Suspense fallback={<div>Loading Button!</div>}>
<Button />
</Suspense>
</div>
)
}
export default App
// ExpensiveComp.js
import React from 'react'
const ExpensiveComp = () => {
return (
<ul>
{[...new Array(5)].map((_, i) => (
<Item key={i} index={i} />
))}
</ul>
)
}
const Item = ({index}) => {
const start = Date.now()
while (Date.now() - start < 1000) {}
return <li>Item ${index}</li>
}
export default ExpensiveComp
// Button.js
import React from 'react'
const Button = () => {
return (
<button
onClick={() => {
window.alert('click button!')
}}>
Button
</button>
)
}
export default Button然后，我們在 react-dom 代碼中加入一句調(diào)試的代碼：
function hydrateInstance(instance, type, props, rootContainerInstance, hostContext, internalInstanceHandle, shouldWarnDev) {
console.log('hydrateInstance-precacheFiberNode', internalInstanceHandle, instance)
...正常情況下，React 的注水過程如圖所示：
但實際上，我們可以在 button 未注水完成時就點擊：
是不是這樣感覺有點奇怪？按照我們平時的理解，“注水”的一個重要作用就是給元素綁定事件，但是這里還未“注水”完成卻可以響應(yīng)事件。其秘訣還是在于 react 的事件委托機制，這里暫時先不討論其原理。
2023-03-08 更新：第三個問題的說明有誤，應(yīng)該是點擊 button 打斷了 Comp 組件的注水過程，讓 React 優(yōu)先對 Button 組件進行注水。
讀到這里，這篇“React SSR架構(gòu)Streaming Render與Selective Hydration源碼分析”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼