深入理解React的Virtual DOM

在Virtual DOM对象被建立出来之后ReactDOM.render会尝试按以下规则把它翻译成浏览器能够看得懂的DOM节点：

•  如果Virtual DOM对象中的type属性是一个string类型的tag名称，就创建一个tag，包含props里的全部属性。
•  如果Virtual DOM对象中的type属性是一个函数或者class，就调用它，它返回的可能还是一个Virtual DOM然后将结果继续递归调用此过程。
•  如果props中有children属性，就对children中的每个元素进行以上过程，并将返回的结果放到父DOM节点中。

最后，浏览器获得了以下HTML（对于上述table的例子）：

<table>  
  <tr>  
    <td>Title</td>  
  </tr>  
  ...  
</table> 

重建DOM

接下浏览器要“重建”一个DOM节点，如果浏览器要更新一个页面，显然，开发者并不希望替换页面中的全部元素，这就是React真正的魔法了。如何才能实现它？先从最简单的方法开始，重新调用这个节点的ReactDOM.render方法。

// 第二次调用  
ReactDOM.render(  
  React.createElement(Table, { rows: rows }),  
  document.getElementById('#root')  
); 

这一次，上面的代码执行逻辑将与看到的代码不同。React不是从头开始创建所有DOM节点并将它们放在页面上，React将使用“diff”算法，以确定节点树的哪些部分必须更新，哪些部分可以保持不变。

那么它是怎样工作的？只有少数几个简单的情况，理解它们将对React程序的优化有很大帮助。请记住，接下来看到的对象是用作表示React Virtual DOM中节点的对象。

▌Case 1：type是一个字符串，type在调用之间保持不变，props也没有改变。

// before update  
{ type: 'div', props: { className: 'cn' } }  
// after update  
{ type: 'div', props: { className: 'cn' } } 

这是最简单的情况：DOM保持不变。

（编辑：西安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!