6. 虚拟dom diff算法

通过上次表格组件总结：

• 通过this.state.edit属性跟踪需要编辑的单元格；
• 在渲染时，如果单元格的行列索引匹配到用户双击的单元格，则在该单元格中显示输入框；
• 从输入框获取新新输入的值，更新表格数据的数组。

当使用setState()方法更新数据时，React将会调用组件的render()方法，让界面更新。
看上去因为一个单元格变化而更新曾哥表格不够高效，React实际上只会修改一个单元格。

在浏览器调试中就能发现，DOM树的更新只是部分而已。

更新表格某条数据

• 虚拟DOM树
  React调用了render()方法，并根据预期DOM结果创建了一个轻量级的树形表达。

• 轻量级操作DOM
  React对于前后的虚拟树做出比较，计算出diff。基于diff，React计算出改变浏览器DOM结构所需的最小DOM操作。（比如appendChild()、textContent等）。

• 使用事件委托响应用户交互3