ReactDiff原理深入分析

//before

    

//after

    

React会销毁App组件（该组件的子组件也全都销毁），并且重新创建一个新的App组件（也包括App的子组件）。

如下的DOM结构转换：

React只会简单的考虑同层节点的位置变换，对于不同层的节点，只有简单的创建和删除。当根节点发现子节点中A不见了，就会直接销毁A；而当D发现自己多了一个子节点A，则会创建一个新的A作为子节点。因此对于这种结构的转变的实际操作是：

A.destroy();
A = new A();
A.append(new B());
A.append(new C());
D.append(A);

虽然看上去这样的算法有些“简陋”，但是其基于的是第一个假设：两个不同类型的元素会产生出不同的树。根据React官方文档，这一假设至今为止没有导致严重的性能问题。这当然也给我们一个提示，在实现自己的组件时，保持稳定的DOM结构会有助于性能的提升。例如，我们有时可以通过CSS隐藏或显示某些节点，而不是真的移除或添加DOM节点。

对比同类型的组件元素

当一个组件更新时，组件实例会保持不变，但是state或props中数据的变化会调用render从而改变该组件中的子元素进行更新。 

对比同一类型的元素

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

React将div的className由before修改为after（类似于React中更新state的合并操作）。

对子节点进行递归

默认情况下（逐层比较），当递归 DOM 节点的子元素时，React 会同时遍历两个子元素的列表；当产生差异时，生成一个 mutation（突变）。

所以在列表末尾新增元素时，更新开销比较小。例如：

  
first
  
second



  
first
  
second
  
third

React 会先匹配两个 

如果只是简单的将新增元素插入到表头，那么更新开销会比较大。比如：

  
Duke
  
Villanova



  
Connecticut
  
Duke
  
Villanova

React 并不会意识到应该保留 

Keys

为了解决上述问题，React 引入了 key 属性。当子元素拥有 key 时，React 使用 key 来匹配原有树上的子元素以及最新树上的子元素。以下示例在新增 key 之后，使得树的转换效率得以提高：

  
Duke
  
Villanova



  
Connecticut
  
Duke
  
Villanova

现在 React 知道只有带着 '2014' key 的元素是新元素，带着 '2015' 以及 '2016' key 的元素仅仅移动了。所以只是创建了 key=2014的元素，并不会创建剩下的两个元素。

所以key的取值最好不要使用数组的下标，因为数组的顺序可能会发生变化，最好使用自身数据携带的唯一标识（id或是其它的属性）。

1. 虚拟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，随后渲染到到页面

2. 用index作为key可能会引发的问题：
                                1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
                                                会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

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

以上就是React Diff原理深入分析的详细内容，更多关于React Diff原理的资料请关注其它相关文章！