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

?[[392192]]?

DOM操作過程

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

差異算法示例

當根元素不同時：

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

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

React將刪除該樹，然后再次重建整個樹。

當元素中的屬性更改時：

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

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

只有差異會在屬性中找到，并會相應地進行更改。

最后添加了新的子元素：

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

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

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

在列表的開頭添加了新元素：

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

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

將新元素添加到開頭時，它將再次重建整個列表。

【51CTO譯稿，合作站點轉載請注明原文譯者和出處為51CTO.com】