深入理解React的Virtual DOM(4)

打开demo要看的第一件事是哪些元素以及何时导致Virtual DOM更新。导航到浏览器的Dev Tools中的React面板，点击设置然后选择“Highlight Updates”复选框：

现在尝试在表中添加一行。如你所见，页面上的每个元素周围都会出现边框。这意味着每次添加行时，React都会计算并比较整个Virtual DOM树。现在尝试按一行内的计数器按钮。你将看到Virtual DOM如何更新 （state仅相关元素及其子元素更新）。

React DevTools暗示了问题可能出现的地方，但没有告诉开发者任何细节：特别是有问题的更新是指元素“diff”之后有不同，还是组件被unmount/mount了。要了解更多信息，开发者需要使用React的内置分析器（请注意，它不能在生产模式下工作）。

转到Chrome DevTools中的“Performance”标签。点击record按钮，然后点击表格。添加一些行，更改一些计数器，然后点击“Stop”按钮。稍等一会儿之后开发者会看到：

在结果输出中，开发者需要关注“Timing”。缩放时间轴，直到看到“React Tree Reconciliation”组及其子项。这些都是组件的名称，旁边有[update]或[mount]。可以看到有一个TableRow被mount了，其他所有的TableRow都在update，这并不是开发者想要的。

大多数性能问题都由[update]或[mount]引起

一个组件（以及组件下的所有东西）由于某种原因在每次更新时重新挂载，开发者不想让它发生（重新挂载很慢），或者在大型分支上执行代价过大的重绘，即使组件似乎没有发生任何改变。

修复mount/unmount

现在，当开发者了解React如何决定更新Virtual DOM并知道幕后发生的事情时，终于准备好解决问题了！修复性能问题首先要解决 mount/unmount。

如果开发者将任何元素/组件的多个子元素在内部表示为数组，那么程序可以获得非常明显的速度提升。

考虑一下：

<div>  
  <Message />  
  <Table />  
  <Footer />  
</div> 

在虚拟DOM中，将表示为：

// ...  
props: {  
  children: [  
    { type: Message },  
    { type: Table },  
    { type: Footer }  
  ]  
}  
// ... 

一个简单的Message组件（是一个div带有一些文本，像是猪齿鱼的顶部通知）和一个很长的Table，比方说1000多行。它们都是div元素的child，因此它们被放置在父节点的props.children之下，并且它们没有key。React甚至不会通过控制台警告来提醒开发者分配key，因为子节点React.createElement作为参数列表而不是数组传递给父节点。

现在，用户已经关闭了顶部通知，所以Message从树中删除。Table、Footer是剩下的child。

// ...  
props: {  
  children: [  
    { type: Table },  
    { type: Footer }  
  ]  
}  
// ... 

React如何看待它？它将它视为一系列改变了type的child：children[0]的type本来是Message，但现在他是Table。因为它们都是对函数（和不同函数）的引用，它会卸载整个Table并再次安装它，渲染它的所有子代：1000多行！

（编辑：ASP站长网）