虚拟DOM

在React中我们操作的元素被称为React元素，并不是真正的原生DOM元素

React通过虚拟DOM 将React元素和原生DOM,进行映射；虽然操作的是React元素，但是这些操作最终都会映射到真实DOM之中。

虚拟DOM的优点：

1、降低API复杂度

2、解决浏览器之间的兼容性问题

3、提升性能（减少DOM的不必要操作）

每当我们调用root.render()时，页面就会发生重新渲染

React会通过diff算法，将新的元素和旧的元素进行比较

通过比较找到发生变化的元素，并且只对变化的元素进行修改，没有发生变化的不予处理

比较两次数据时，React会优先比较父元素，父元素如果不同，直接替换所有元素

父元素一致，再去逐个比较子元素，直到找到所有发生变化的元素为止

key

当我们在jsx中显示数组时，数组中的每一个元素都应该设置一个唯一的key

重新渲染页面时，react会按照顺序依次比较，当渲染一个列表不制定key值的时候，同样也会按顺序进行比较；但是如果顺序发生改变时，会产生性能问题

key的作用相当于给元素添加一个唯一值，类似id，但是在页面中无法显示，当设置key值后，就会比较相同key值的元素，而不会按照顺序比较

通常在渲染一个列表时，会创建一个唯一的key值来避免上述问题（这个key在当前列表中唯一即可）

注意：

1.开发中一般会使用用户的id作为key

2.尽量不要使用索引，索引会根据元素数据改变发生变化