6. 虚拟dom diff算法
2020-09-14 本文已影响0人
萘小蒽
通过上次表格组件总结:
- 通过this.state.edit属性跟踪需要编辑的单元格;
- 在渲染时,如果单元格的行列索引匹配到用户双击的单元格,则在该单元格中显示输入框;
- 从输入框获取新新输入的值,更新表格数据的数组。
当使用setState()方法更新数据时,React将会调用组件的render()方法,让界面更新。
看上去因为一个单元格变化而更新曾哥表格不够高效,React实际上只会修改一个单元格。
在浏览器调试中就能发现,DOM树的更新只是部分而已。
更新表格某条数据
-
虚拟DOM树
React调用了render()方法,并根据预期DOM结果创建了一个轻量级的树形表达。 -
轻量级操作DOM
React对于前后的虚拟树做出比较,计算出diff。基于diff,React计算出改变浏览器DOM结构所需的最小DOM操作。(比如appendChild()、textContent等)。 -
使用事件委托响应用户交互3