React?Hydrate原理源碼解析
引言
React 渲染過程，即ReactDOM.render執(zhí)行過程分為兩個大的階段：render 階段以及 commit 階段。React.hydrate渲染過程和ReactDOM.render差不多，兩者之間最大的區(qū)別就是，ReactDOM.hydrate 在 render 階段，會嘗試復(fù)用(hydrate)瀏覽器現(xiàn)有的 dom 節(jié)點，并相互關(guān)聯(lián) dom 實例和 fiber，以及找出 dom 屬性和 fiber 屬性之間的差異。
Demo
這里，我們在 index.html 中直接返回一段 html，以模擬服務(wù)端渲染生成的 html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Mini React</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div id="root"><div id="root"><div id="container"><h1 id="A">1<div id="A2">A2</div></h1><p id="B"><span id="B1">B1</span></p><span id="C">C</span></div></div></div>
</body>
</html>
注意，root 里面的內(nèi)容不能換行，不然客戶端hydrate的時候會提示服務(wù)端和客戶端的模版不一致。
新建 index.jsx：
import React from "react";
import ReactDOM from "react-dom";
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 1,
};
}
render() {
const { count } = this.state;
return (
<div id="container">
<div id="A">
{count} <div id="A2">A2</div>
</div>
<p id="B">
<span id="B1">B1</span>
</p>
</div>
);
}
}
ReactDOM.hydrate(<Home />, document.getElementById("root"));
對比服務(wù)端和客戶端的內(nèi)容可知，服務(wù)端h1#A和客戶端的div#A不同，同時服務(wù)端比客戶端多了一個span#C
在客戶端開始執(zhí)行之前，即 ReactDOM.hydrate 開始執(zhí)行前，由于服務(wù)端已經(jīng)返回了 html 內(nèi)容，瀏覽器會立馬顯示內(nèi)容。對應(yīng)的真實 DOM 樹如下：
注意，這不是 fiber 樹??！
ReactDOM.render
先來回顧一下 React 渲染更新過程，分為兩大階段，五小階段：
render 階段
- beginWork
- completeUnitOfWork
commit 階段。
- commitBeforeMutationEffects
- commitMutationEffects
- commitLayoutEffects
React 在 render 階段會根據(jù)新的 element tree 構(gòu)建 workInProgress 樹，收集具有副作用的 fiber 節(jié)點，構(gòu)建副作用鏈表。
特別是，當(dāng)我們調(diào)用ReactDOM.render函數(shù)在客戶端進(jìn)行第一次渲染時，render階段的completeUnitOfWork函數(shù)針對HostComponent以及HostText類型的 fiber 執(zhí)行以下 dom 相關(guān)的操作：
- 調(diào)用
document.createElement為HostComponent類型的 fiber 節(jié)點創(chuàng)建真實的 DOM 實例?；蛘哒{(diào)用document.createTextNode為HostText類型的 fiber 節(jié)點創(chuàng)建真實的 DOM 實例 - 將 fiber 節(jié)點關(guān)聯(lián)到真實 dom 的
__reactFiber$rsdw3t27flk(后面是隨機(jī)數(shù))屬性上。 - 將 fiber 節(jié)點的
pendingProps屬性關(guān)聯(lián)到真實 dom 的__reactProps$rsdw3t27flk(后面是隨機(jī)數(shù))屬性上 - 將真實的 dom 實例關(guān)聯(lián)到
fiber.stateNode屬性上：fiber.stateNode = dom。 - 遍歷
pendingProps，給真實的dom設(shè)置屬性，比如設(shè)置 id、textContent 等
React 渲染更新完成后，React 會為每個真實的 dom 實例掛載兩個私有的屬性：__reactFiber$和__reactProps$，以div#container為例：
ReactDOM.hydrate
hydrate中文意思是水合物，這樣理解有點抽象。根據(jù)源碼，我更樂意將hydrate的過程描述為：React 在 render 階段，構(gòu)造 workInProgress 樹時，同時按相同的順序遍歷真實的 DOM 樹，判斷當(dāng)前的 workInProgress fiber 節(jié)點和同一位置的 dom 實例是否滿足hydrate的條件，如果滿足，則直接復(fù)用當(dāng)前位置的 DOM 實例，并相互關(guān)聯(lián) workInProgress fiber 節(jié)點和真實的 dom 實例，比如：
fiber.stateNode = dom; dom.__reactProps$ = fiber.pendingProps; dom.__reactFiber$ = fiber;
如果 fiber 和 dom 滿足hydrate的條件，則還需要找出dom.attributes和fiber.pendingProps之間的屬性差異。
遍歷真實 DOM 樹的順序和構(gòu)建 workInProgress 樹的順序是一致的。都是深度優(yōu)先遍歷，先遍歷當(dāng)前節(jié)點的子節(jié)點，子節(jié)點都遍歷完了以后，再遍歷當(dāng)前節(jié)點的兄弟節(jié)點。因為只有按相同的順序，fiber 樹同一位置的 fiber 節(jié)點和 dom 樹同一位置的 dom 節(jié)點才能保持一致
只有類型為HostComponent或者HostText類型的 fiber 節(jié)點才能hydrate。這一點也很好理解，React 在 commit 階段，也就只有這兩個類型的 fiber 節(jié)點才需要執(zhí)行 dom 操作。
fiber 節(jié)點和 dom 實例是否滿足hydrate的條件：
- 對于類型為
HostComponent的 fiber 節(jié)點，如果當(dāng)前位置對應(yīng)的 DOM 實例nodeType為ELEMENT_NODE，并且fiber.type === dom.nodeName，那么當(dāng)前的 fiber 可以混合(hydrate) - 對于類型為
HostText的 fiber 節(jié)點，如果當(dāng)前位置對應(yīng)的 DOM 實例nodeType為TEXT_NODE，同時fiber.pendingProps不為空，那么當(dāng)前的 fiber 可以混合(hydrate)
hydrate的終極目標(biāo)就是，在構(gòu)造 workInProgress 樹的過程中，盡可能的復(fù)用當(dāng)前瀏覽器已經(jīng)存在的 DOM 實例以及 DOM 上的屬性，這樣就無需再為 fiber 節(jié)點創(chuàng)建 DOM 實例，同時對比現(xiàn)有的 DOM 的attribute以及 fiber 的pendingProps，找出差異的屬性。然后將 dom 實例和 fiber 節(jié)點相互關(guān)聯(lián)(通過 dom 實例的__reactFiber$以及__reactProps$，fiber 的 stateNode 相互關(guān)聯(lián))
hydrate 過程
React 在 render 階段構(gòu)造HostComponent或者HostText類型的 fiber 節(jié)點時，會首先調(diào)用 tryToClaimNextHydratableInstance(workInProgress) 方法嘗試給當(dāng)前 fiber 混合(hydrate)DOM 實例。如果當(dāng)前 fiber 不能被混合，那當(dāng)前節(jié)點的所有子節(jié)點在后續(xù)的 render 過程中都不再進(jìn)行hydrate，而是直接創(chuàng)建 dom 實例。等到當(dāng)前節(jié)點所有子節(jié)點都調(diào)用completeUnitOfWork完成工作后，又會從當(dāng)前節(jié)點的兄弟節(jié)點開始嘗試混合。
以下面的 demo 為例
// 服務(wù)端返回的DOM結(jié)構(gòu)，這里為了直觀，我格式化了一下，按理服務(wù)端返回的內(nèi)容，是不允許換行或者有空字符串的
<body>
<div id="root">
<div id="container">
<h1 id="A">
1 <div id="A2">A2</div>
</h1>
<p id="B">
<span id="B1">B1</span>
</p>
<span id="C">C</span>
</div>
</div>
</body>
// 客戶端生成的內(nèi)容
<div id="container">
<div id="A">
1 <div id="A2">A2</div>
</div>
<p id="B">
<span id="B1">B1</span>
</p>
</div>
render 階段，按以下順序：
div#container 滿足hydrate的條件，因此關(guān)聯(lián) dom，fiber.stateNode = div#container。然后使用hydrationParentFiber記錄當(dāng)前混合的 fiber 節(jié)點：hydrationParentFiber = fiber。獲取下一個 DOM 實例，這里是h1#A，保存在變量nextHydratableInstance中，nextHydratableInstance = h1#A。
這里，hydrationParentFiber 和 nextHydratableInstance 都是全局變量。
div#A和h1#A不能混合，這時并不會立即結(jié)束混合的過程，React 繼續(xù)對比h1#A的兄弟節(jié)點，即p#B，發(fā)現(xiàn)div#A還是不能和p#B混合，經(jīng)過最多兩次對比，React 認(rèn)為 dom 樹中已經(jīng)沒有 dom 實例滿足和div#A這個 fiber 混合的條件，于是div#A節(jié)點及其所有子孫節(jié)點都不再進(jìn)行混合的過程，此時將isHydrating設(shè)置為 false 表明div#A這棵子樹都不再走混合的過程，直接走創(chuàng)建 dom 實例。同時控制臺提示：Expected server HTML to contain a matching..之類的錯誤。- beginWork 執(zhí)行到文本節(jié)點
1時，發(fā)現(xiàn)isHydrating = false，因此直接跳過混合的過程，在completeUnitOfWork階段直接調(diào)用document.createTextNode直接為其創(chuàng)建文本節(jié)點 - 同樣的，beginWork 執(zhí)行到節(jié)點
div#A2時，發(fā)現(xiàn)isHydrating = false，因此直接跳過混合的過程，在completeUnitOfWork階段直接調(diào)用document.createElement直接為其創(chuàng)建真實 dom 實例，并設(shè)置屬性 - 由于
div#A的子節(jié)點都已經(jīng)completeUnitWork了，輪到div#A調(diào)用completeUnitWork完成工作，將hydrationParentFiber指向其父節(jié)點，即div#container這個 dom 實例。設(shè)置isHydrating = true表明可以為當(dāng)前節(jié)點的兄弟節(jié)點繼續(xù)混合的過程了。div#A沒有混合的 dom 實例，因此調(diào)用document.createElement為其創(chuàng)建真實的 dom 實例。 - 為
p#B執(zhí)行 beginWork。由于nextHydratableInstance保存的還是h1#Adom 實例，因此p#B和h1#A對比發(fā)現(xiàn)不能復(fù)用，React 嘗試和h1#A的兄弟節(jié)點p#B對比，發(fā)現(xiàn) fiberp#B和 domp#B能混，因此將h1#A標(biāo)記為刪除，同時關(guān)聯(lián) dom 實例：fiber.stateNode = p#B，保存hydrationParentFiber = fiber，nextHydratableInstance指向p#B的第一個子節(jié)點，即span#B1
...省略了后續(xù)的過程。
從上面的執(zhí)行過程可以看出，hydrate 的過程如下：
- 調(diào)用
tryToClaimNextHydratableInstance開始混合 - 判斷當(dāng)前 fiber 節(jié)點和同一位置的 dom 實例是否滿足混合的條件。
- 如果當(dāng)前位置的 dom 實例不滿足混合條件，則繼續(xù)比較當(dāng)前 dom 的兄弟元素，如果兄弟元素和當(dāng)前的 fiber 也不能混合，則當(dāng)前 fiber 及其所有子孫節(jié)點都不能混合，后續(xù) render 過程將會跳過混合。直到當(dāng)前 fiber 節(jié)點的兄弟節(jié)點 render，才會繼續(xù)混合的過程。
事件綁定
React在初次渲染時，不論是ReactDOM.render還是ReactDOM.hydrate，會調(diào)用createRootImpl函數(shù)創(chuàng)建fiber的容器，在這個函數(shù)中調(diào)用listenToAllSupportedEvents注冊所有原生的事件。
function createRootImpl(container, tag, options) {
// ...
var root = createContainer(container, tag, hydrate);
// ...
listenToAllSupportedEvents(container);
// ...
return root;
}
這里container就是div#root節(jié)點。listenToAllSupportedEvents會給div#root節(jié)點注冊瀏覽器支持的所有原生事件，比如onclick等。React合成事件一文介紹過，React采用的是事件委托的機(jī)制，將所有事件代理到div#root節(jié)點上。以下面的為例：
<div id="A" onClick={this.handleClick}>
button
<div>
我們知道React在渲染時，會將fiber的props關(guān)聯(lián)到真實的dom的__reactProps$屬性上，此時
div#A.__reactProps$ = {
onClick: this.handleClick
}
當(dāng)我們點擊按鈕時，會觸發(fā)div#root上的事件監(jiān)聽器：
function onclick(e){
const target = e.target
const fiberProps = target.__reactProps$
const clickhandle = fiberProps.onClick
if(clickhandle){
clickhandle(e)
}
}
這樣我們就可以實現(xiàn)事件的委托。這其中最重要的就是將fiber的props掛載到真實的dom實例的__reactProps$屬性上。因此，只要我們在hydrate階段能夠成功關(guān)聯(lián)dom和fiber，就自然也實現(xiàn)了事件的“綁定”
hydrate 源碼剖析
hydrate 的過程發(fā)生在 render 階段，commit 階段幾乎沒有和 hydrate 相關(guān)的邏輯。render 階段又分為兩個小階段：beginWork 和 completeUnitOfWork。只有HostRoot、HostComponent、HostText三種類型的 fiber 節(jié)點才需要 hydrate，因此源碼只針對這三種類型的 fiber 節(jié)點剖析
beginWork
beginWork 階段判斷 fiber 和 dom 實例是否滿足混合的條件，如果滿足，則為 fiber 關(guān)聯(lián) dom 實例：fiber.stateNode = dom
function beginWork(current, workInProgress, renderLanes) {
switch (workInProgress.tag) {
case HostRoot:
return updateHostRoot(current, workInProgress, renderLanes);
case HostComponent:
return updateHostComponent(current, workInProgress, renderLanes);
case HostText:
return updateHostText(current, workInProgress);
}
}
HostRoot Fiber
HostRoot fiber 是容器root的 fiber 節(jié)點。
這里主要是判斷當(dāng)前 render 是ReactDOM.render還是ReactDOM.hydrate，我們調(diào)用ReactDOM.hydrate渲染時，root.hydrate為 true。
如果是調(diào)用的ReactDOM.hydrate，則調(diào)用enterHydrationState函數(shù)進(jìn)入hydrate的過程。這個函數(shù)主要是初始化幾個全局變量：
- isHydrating。表示當(dāng)前正處于 hydrate 的過程。如果當(dāng)前節(jié)點及其所有子孫節(jié)點都不滿足 hydrate 的條件時，這個變量為 false
- hydrationParentFiber。當(dāng)前混合的 fiber。正常情況下，該變量和
HostComponent或者HostText類型的 workInProgress 一致。 - nextHydratableInstance。下一個可以混合的 dom 實例。當(dāng)前 dom 實例的第一個子元素或者兄弟元素。
注意getNextHydratable會判斷 dom 實例是否是ELEMENT_NODE類型(對應(yīng)的 fiber 類型是HostComponent)或者TEXT_NODE類型(對應(yīng)的 fiber 類型是HostText)。只有ELEMENT_NODE或者HostText類型的 dom 實例才是可以 hydrate 的
function updateHostRoot(current, workInProgress, renderLanes) {
if (root.hydrate && enterHydrationState(workInProgress)) {
var child = mountChildFibers(workInProgress, null, nextChildren);
}
return workInProgress.child;
}
function getNextHydratable(node) {
// 跳過 non-hydratable 節(jié)點.
for (; node != null; node = node.nextSibling) {
var nodeType = node.nodeType;
if (nodeType === ELEMENT_NODE || nodeType === TEXT_NODE) {
break;
}
}
return node;
}
function enterHydrationState() {
var parentInstance = fiber.stateNode.containerInfo;
nextHydratableInstance = getNextHydratable(parentInstance.firstChild);
hydrationParentFiber = fiber;
isHydrating = true;
}
HostComponent
function updateHostComponent(current, workInProgress, renderLanes) {
if (current === null) {
tryToClaimNextHydratableInstance(workInProgress);
}
reconcileChildren(current, workInProgress, nextChildren, renderLanes);
return workInProgress.child;
}
HostText Fiber
function updateHostText(current, workInProgress) {
if (current === null) {
tryToClaimNextHydratableInstance(workInProgress);
}
return null;
}
tryToClaimNextHydratableInstance
假設(shè)當(dāng)前 fiberA 對應(yīng)位置的 dom 為 domA，tryToClaimNextHydratableInstance 會首先調(diào)用tryHydrate判斷 fiberA 和 domA 是否滿足混合的條件：
如果 fiberA 和 domA 滿足混合的條件，則將hydrationParentFiber = fiberA;。并且獲取 domA 的第一個子元素賦值給nextHydratableInstance
如果 fiberA 和 domA 不滿足混合的條件，則獲取 domA 的兄弟節(jié)點，即 domB，調(diào)用tryHydrate判斷 fiberA 和 domB 是否滿足混合條件：
- 如果 domB 滿足和 fiberA 混合的條件，則將 domA 標(biāo)記為刪除，并獲取 domB 的第一個子元素賦值給
nextHydratableInstance - 如果 domB 不滿足和 fiberA 混合的條件，則調(diào)用
insertNonHydratedInstance提示錯誤："Warning: Expected server HTML to contain a matching"，同時將isHydrating標(biāo)記為 false 退出。
這里可以看出，tryToClaimNextHydratableInstance最多比較兩個 dom 節(jié)點，如果兩個 dom 節(jié)點都無法滿足和 fiberA 混合的條件，則說明當(dāng)前 fiberA 及其所有的子孫節(jié)點都無需再進(jìn)行混合的過程，因此將isHydrating標(biāo)記為 false。等到當(dāng)前 fiberA 節(jié)點及其子節(jié)點都完成了工作，即都執(zhí)行了completeWork，isHydrating才會被設(shè)置為 true，以便繼續(xù)比較 fiberA 的兄弟節(jié)點
這里還需要注意一點，如果兩個 dom 都無法滿足和 fiberA 混合，那么nextHydratableInstance依然保存的是 domA，domA 會繼續(xù)和 fiberA 的兄弟節(jié)點比對。
function tryToClaimNextHydratableInstance(fiber) {
if (!isHydrating) {
return;
}
var nextInstance = nextHydratableInstance;
var firstAttemptedInstance = nextInstance;
if (!tryHydrate(fiber, nextInstance)) {
// 如果第一次調(diào)用tryHydrate發(fā)現(xiàn)當(dāng)前fiber和dom不滿足hydrate的條件，則獲取dom的兄弟節(jié)點
// 然后調(diào)用 tryHydrate 繼續(xù)對比fiber和兄弟節(jié)點是否滿足混合
nextInstance = getNextHydratableSibling(firstAttemptedInstance);
if (!nextInstance || !tryHydrate(fiber, nextInstance)) {
// 對比了兩個dom發(fā)現(xiàn)都無法和fiber混合，因此調(diào)用insertNonHydratedInstance控制臺提示錯誤
insertNonHydratedInstance(hydrationParentFiber, fiber);
isHydrating = false;
hydrationParentFiber = fiber;
return;
}
// 如果第一次tryHydrate不滿足，第二次tryHydrate滿足，則說明兄弟節(jié)點和當(dāng)前fiber是可以混合的，此時需要刪除當(dāng)前位置的dom
deleteHydratableInstance(hydrationParentFiber, firstAttemptedInstance);
}
hydrationParentFiber = fiber;
nextHydratableInstance = getFirstHydratableChild(nextInstance);
}
// 將dom實例保存在 fiber.stateNode上
function tryHydrate(fiber, nextInstance) {
switch (fiber.tag) {
case HostComponent: {
if (
nextInstance.nodeType === ELEMENT_NODE &&
fiber.type.toLowerCase() === nextInstance.nodeName.toLowerCase()
) {
fiber.stateNode = nextInstance;
return true;
}
return false;
}
case HostText: {
var text = fiber.pendingProps;
if (text !== "" && nextInstance.nodeType === TEXT_NODE) {
fiber.stateNode = nextInstance;
return true;
}
return false;
}
default:
return false;
}
}
completeUnitOfWork
completeUnitOfWork 階段主要是給 dom 關(guān)聯(lián) fiber 以及 props：dom.__reactProps$ = fiber.pendingProps;dom.__reactFiber$ = fiber;同時對比fiber.pendingProps和dom.attributes的差異
function completeUnitOfWork(unitOfWork) {
var completedWork = unitOfWork;
do {
var current = completedWork.alternate;
var returnFiber = completedWork.return;
next = completeWork(current, completedWork, subtreeRenderLanes);
var siblingFiber = completedWork.sibling;
if (siblingFiber !== null) {
workInProgress = siblingFiber;
return;
}
completedWork = returnFiber;
workInProgress = completedWork;
} while (completedWork !== null);
}
function completeWork(current, workInProgress, renderLanes) {
switch (workInProgress.tag) {
case HostRoot: {
if (current === null) {
var wasHydrated = popHydrationState(workInProgress);
if (wasHydrated) {
markUpdate(workInProgress);
}
}
return null;
}
case HostComponent:
// 第一次渲染
if (current === null) {
var _wasHydrated = popHydrationState(workInProgress);
if (_wasHydrated) {
// 如果存在差異的屬性，則將fiber副作用標(biāo)記為更新
if (prepareToHydrateHostInstance(workInProgress)) {
markUpdate(workInProgress);
}
} else {
}
}
case HostText: {
var newText = newProps;
if (current === null) {
var _wasHydrated2 = popHydrationState(workInProgress);
if (_wasHydrated2) {
if (prepareToHydrateHostTextInstance(workInProgress)) {
markUpdate(workInProgress);
}
}
}
return null;
}
}
}
popHydrationState
function popHydrationState(fiber) {
if (fiber !== hydrationParentFiber) {
return false;
}
if (!isHydrating) {
popToNextHostParent(fiber);
isHydrating = true;
return false;
}
var type = fiber.type;
if (
fiber.tag !== HostComponent ||
!shouldSetTextContent(type, fiber.memoizedProps)
) {
var nextInstance = nextHydratableInstance;
while (nextInstance) {
deleteHydratableInstance(fiber, nextInstance);
nextInstance = getNextHydratableSibling(nextInstance);
}
}
popToNextHostParent(fiber);
nextHydratableInstance = hydrationParentFiber
? getNextHydratableSibling(fiber.stateNode)
: null;
return true;
}
以下圖為例：
在 beginWork 階段對 p#B fiber 工作時，發(fā)現(xiàn) dom 樹中同一位置的h1#B不滿足混合的條件，于是繼續(xù)對比h1#B的兄弟節(jié)點，即div#C，仍然無法混合，經(jīng)過最多兩輪對比后發(fā)現(xiàn)p#B這個 fiber 沒有可以混合的 dom 節(jié)點，于是將 isHydrating 標(biāo)記為 false，hydrationParentFiber = fiberP#B。p#B的子孫節(jié)點都不再進(jìn)行混合的過程。
div#B1fiber 沒有子節(jié)點，因此它可以調(diào)用completeUnitOfWork完成工作，completeUnitOfWork 階段調(diào)用 popHydrationState 方法，在popHydrationState方法內(nèi)部，首先判斷 fiber !== hydrationParentFiber，由于此時的hydrationParentFiber等于p#B，因此條件成立，不用往下執(zhí)行。
由于p#B fiber 的子節(jié)點都已經(jīng)完成了工作，因此它也可以調(diào)用completeUnitOfWork完成工作。同樣的，在popHydrationState函數(shù)內(nèi)部，第一個判斷fiber !== hydrationParentFiber不成立，兩者是相等的。第二個條件!isHydrating成立，進(jìn)入條件語句，首先調(diào)用popToNextHostParent將hydrationParentFiber設(shè)置為p#B的第一個類型為HostComponent的祖先元素，這里是div#A fiber，然后將isHydrating設(shè)置為 true，指示可以為p#B的兄弟節(jié)點進(jìn)行混合。
如果服務(wù)端返回的 DOM 有多余的情況，則調(diào)用deleteHydratableInstance將其刪除，比如下圖中div#D節(jié)點將會在div#Afiber 的completeUnitOfWork階段刪除
prepareToHydrateHostInstance
對于HostComponent類型的fiber會調(diào)用這個方法，這里只要是關(guān)聯(lián) dom 和 fiber：
- 設(shè)置
domInstance.__reactFiber$w63z5ormsqk = fiber - 設(shè)置
domInstance.__reactProps$w63z5ormsqk = props - 對比服務(wù)端和客戶端的屬性
function prepareToHydrateHostInstance(fiber) {
var domInstance = fiber.stateNode;
var updatePayload = hydrateInstance(
domInstance,
fiber.type,
fiber.memoizedProps,
fiber
);
fiber.updateQueue = updatePayload;
if (updatePayload !== null) {
return true;
}
return false;
}
function hydrateInstance(domInstance, type, props, fiber) {
precacheFiberNode(fiber, domInstance); // domInstance.__reactFiber$w63z5ormsqk = fiber
updateFiberProps(domInstance, props); // domInstance.__reactProps$w63z5ormsqk = props
// 比較dom.attributes和props的差異，如果dom.attributes的屬性比props多，說明服務(wù)端添加了額外的屬性，此時控制臺提示。
// 注意，在對比過程中，只有服務(wù)端和客戶端的children屬性(即文本內(nèi)容)不同時，控制臺才會提示錯誤，同時在commit階段，客戶端會糾正這個錯誤，以客戶端的文本為主。
// 但是，如果是id不同，則客戶端并不會糾正。
return diffHydratedProperties(domInstance, type, props);
}
這里重點講下diffHydratedProperties，以下面的demo為例：
// 服務(wù)端對應(yīng)的dom
<div id="root"><div extra="server attr" id="server">客戶端的文本</div></div>
// 客戶端
render() {
const { count } = this.state;
return <div id="client">客戶端的文本</div>;
}
在diffHydratedProperties的過程中發(fā)現(xiàn)，服務(wù)端返回的id和客戶端的id不同，控制臺提示id不匹配，但是客戶端并不會糾正這個，可以看到瀏覽器的id依然是server。
同時，服務(wù)端多返回了一個extra屬性，因此需要控制臺提示，但由于已經(jīng)提示了id不同的錯誤，這個錯誤就不會提示。
最后，客戶端的文本和服務(wù)端的children不同，即文本內(nèi)容不同，也需要提示錯誤，同時，客戶端會糾正這個文本，以客戶端的為主。
prepareToHydrateHostTextInstance
對于HostText類型的fiber會調(diào)用這個方法，這個方法邏輯比較簡單，就不詳細(xì)介紹了 務(wù)端對應(yīng)的dom
<div id="root"><div extra="server attr" id="server">客戶端的文本</div></div>
// 客戶端
render() {
const { count } = this.state;
return <div id="client">客戶端的文本</div>;
}
在diffHydratedProperties的過程中發(fā)現(xiàn)，服務(wù)端返回的id和客戶端的id不同，控制臺提示id不匹配，但是客戶端并不會糾正這個，可以看到瀏覽器的id依然是server。
同時，服務(wù)端多返回了一個extra屬性，因此需要控制臺提示，但由于已經(jīng)提示了id不同的錯誤，這個錯誤就不會提示。
最后，客戶端的文本和服務(wù)端的children不同，即文本內(nèi)容不同，也需要提示錯誤，同時，客戶端會糾正這個文本，以客戶端的為主。
prepareToHydrateHostTextInstance
對于HostText類型的fiber會調(diào)用這個方法，這個方法邏輯比較簡單，就不詳細(xì)介紹了
以上就是React Hydrate原理源碼解析的詳細(xì)內(nèi)容，更多關(guān)于React Hydrate原理的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要給大家分享React中的useEffect四種用法，useEffect中 觸發(fā)更新，重復(fù)的 useEffect，依賴值觸發(fā)回調(diào)，useEffect 的返回值，通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細(xì)介紹了React中獲取真實的dom的相關(guān)方法,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-02-02
React-Router如何進(jìn)行頁面權(quán)限管理的方法
本篇文章主要介紹了React-Router如何進(jìn)行頁面權(quán)限管理的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
React事件監(jiān)聽和State狀態(tài)修改方式
這篇文章主要介紹了React事件監(jiān)聽和State狀態(tài)修改方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
筆者最近用react useEffect閉包，其中踩到了一些坑在此與大家分享一下。需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06
這篇文章主要介紹了使用React手寫一個對話框或模態(tài)框的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
react-native?父函數(shù)組件調(diào)用類子組件的方法(實例詳解)
這篇文章主要介紹了react-native?父函數(shù)組件調(diào)用類子組件的方法,通過詳細(xì)步驟介紹了React 函數(shù)式組件之父組件調(diào)用子組件的方法，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
本篇文章主要介紹了官方推薦react-navigation的具體使用詳解，react-navigation是致力于解決導(dǎo)航卡頓，數(shù)據(jù)傳遞，Tabbar和navigator布局，支持redux。非常具有實用價值，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了Webpack3+React16代碼分割的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要為大家介紹了React JSX基礎(chǔ)語法教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09