6.|6. 虚拟dom diff算法

2021-09-15

通过上次表格组件总结：

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

当使用setState()方法更新数据时，React将会调用组件的render()方法，让界面更新。
看上去因为一个单元格变化而更新曾哥表格不够高效，React实际上只会修改一个单元格。
在浏览器调试中就能发现，DOM树的更新只是部分而已。

6.|6. 虚拟dom diff算法

文章图片
更新表格某条数据

虚拟DOM树
React调用了render()方法，并根据预期DOM结果创建了一个轻量级的树形表达。
轻量级操作DOM
React对于前后的虚拟树做出比较，计算出diff。基于diff，React计算出改变浏览器DOM结构所需的最小DOM操作。（比如appendChild()、textContent等）。
【6.|6. 虚拟dom diff算法】使用事件委托响应用户交互3

推荐阅读

上一篇：关于那间木屋——《芙蓉阁楼》

下一篇：好看的皮囊千篇一律，有趣的灵魂百里挑一