React-19：虚拟DOM与DOM Diffing算法

key的作用

虚拟DOM中key的作用：

1. 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。
2. 详细的说: 当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】,
   随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下：
   a. 旧虚拟DOM中找到了与新虚拟DOM相同的key：
   (1).若虚拟DOM中内容没变, 直接使用之前的真实DOM
   (2).若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM
   b. 旧虚拟DOM中未找到与新虚拟DOM相同的key
   根据数据创建新的真实DOM，随后渲染到到页面

用index作为key可能会引发的问题：

1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作: 会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
2. 如果结构中还包含输入类的DOM： 会产生错误DOM更新 ==> 界面有问题。
3. 注意！如果不存在对数据的逆序添加、逆序删除等破坏顺序操作， 仅用于渲染列表用于展示，使用index作为key是没有问题的。

开发中如何选择key

1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
2.如果确定只是简单的展示数据，用index也是可以的。

Diffing 算法

React 执行 Render() 函数时，会生成一次虚拟 DOM，当组件再次更新时，会再生成一颗新的树，然后 React 会对比两棵树的异同，执行更新算法。React 通过如下方法比较 DOM 的异同，其复杂度为 O(n)：

两个不同类型的元素会产生出不同的树
开发者可以通过 key prop 来暗示哪些子元素在不同的渲染下能保持稳定

比对不同类型的元素

当根节点为不同类型的元素时，React 会拆卸原有的树并且建立起新的树。举个例子，当一个元素从 变成 或者 DOM 节点被销毁，都会触发一个完整的重建流程。

比对同一类型的元素

当比对两个相同类型的 React 元素时，React 会保留 DOM 节点，仅比对及更新有改变的属性。