【51CTO.com快譯】在React中，對(duì)Virtual DOM進(jìn)行更改，然后同步到React DOM的過(guò)程叫和解。React判斷出哪些對(duì)象發(fā)生了變化的這個(gè)過(guò)程為漂移。

?[[392192]]?

DOM操作過(guò)程

• React更新虛擬DOM。
• 然后將前一個(gè)狀態(tài)的虛擬DOM與更新后的虛擬DOM進(jìn)行比較，以識(shí)別對(duì)象中發(fā)生了哪些更改。這是用差分算法完成的。
• 更改后的對(duì)象將在實(shí)際DOM上得到更新。

差異算法示例

當(dāng)根元素不同時(shí)：

// Old version
<div><Tree/></div>

// New update
<span><Tree/></span>

React將刪除該樹(shù)，然后再次重建整個(gè)樹(shù)。

當(dāng)元素中的屬性更改時(shí)：

// Old
<span id="span1" />

//New
<span id="span2" />

只有差異會(huì)在屬性中找到，并會(huì)相應(yīng)地進(jìn)行更改。

最后添加了新的子元素：

// old
<ul>
<li>Child1</li>
<li>Child2</li>
</ul>

//New
<ul>
<li>Child1</li>
<li>Child2</li>
<li>Child3</li>
</ul>

新元素將添加到列表的末尾。

在列表的開(kāi)頭添加了新元素：

// Old
<ul>
<li>Child1</li>
<li>Child2</li>
</ul>

//New
<ul>
<li>Child3</li>
<li>Child1</li>
<li>Child2</li>
</ul>

將新元素添加到開(kāi)頭時(shí)，它將再次重建整個(gè)列表。

【51CTO譯稿，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明原文譯者和出處為51CTO.com】