虚拟DOM和diff算法

一、虚拟DOM

1.为什么使用虚拟DOM？

React使用虚拟DOM会进行diff算法的对比，从而发现哪些DOM 更新了，根据变化的虚拟DOM局部更新真实DOM，避免频繁的操作真实DOM，带来页面渲染的性能问题

2.什么是虚拟DOM？

它本质上就是React提供的一个JS对象而已，React通过对象来描述结果

​ ，这就是虚拟DOM

3.怎么使用虚拟DOM?

React 每次调用类组件的render() 生命周期函数时，都会根据组件模板（JSX）创建虚拟DOM 对象，React会将这个虚拟DOM保存下来，利用本次生成的新的虚拟DOM对象，和上次的虚拟DOM进行同层对比，找出更新的标签、属性、元素内容。针对变化了的内容，更新真实DOM

二、diff算法

1.diff特点

1. 同层对比
2. 分为三种类型的对比：

• ​ 虚拟DOM树 对比

• ​ 组件的对比

• ​ 列表元素的对比

2.虚拟DOM树和diff算法对比

1. 同层对比标签名称、标签属性、标签内容是否一致；不会垮层级对比
2. 如果虚拟DOM出现跨层级移动，React直接将旧的层级删除，在新的节点下创建新的层级元素，不会复用旧的DOM层级

3.组件的diff算法对比(结合动态组件)

1. 如果在重复render() 生成虚拟DOM时，组件没有发生变化，此时组件就相当于固定的虚拟DOM树了，只是封装了一个组件而已。参照 虚拟DOM 的 diff 算法对比规则
2. 如果组件是动态切换的，React直接放弃对比，哪怕两个组件的结构是一样的，直接消失的组件DOM 移除，出现的组件再创建新的DOM 节点。（简单来说：谁出现就创建谁，谁消失就销毁谁）

4.列表元素的diff算法对比

1. 没有key属性的时候，React对比新旧虚拟DOM时，会按照元素的顺序对比元素内容是否发生变化，变化了就重新生成DOM
2. 有key属性的时候，React对比新旧虚拟DOM时，会将两个值相同的元素进行对比，看看元素内容是否发生了变化，变化了就重新生成DOM