React基础3--diff算法

u=911206721,762108725&fm=26&gp=0.jpg

本来想深入说一下virtual dom 与diff，但是最近很忙，就简单聊聊react的diff算法吧。

diff算法

传统的diff算法是通过循环递归对节点进行一次对比，从而计算一棵树型结构转换成另一颗属性结构。这种方法效率低下，如果采用这种方式进行渲染性能的消耗会异常大。那么react是怎么解决这个的呢？

1.dom节点跨层级的移动操作特别少，少到可以忽略不计。

react对树的算法进行了简明的优化，是的dom树通过分层比较dom的差异，并且只会对比同一层，忽略跨层级的差异
例如，对比一个父节点下所有子节点，当发现有一个子节点不在时，即删除该子节点下所有内容，这样减少了很多不必要的遍历。
假如用户出现了跨层级移动操作
假如，在dom下有两个节点dom1、dom2。此时我们需要将dom1移植到dom2下。
react发现dom1不见，它会不管三七二十一，将整个dom1删除，根本不会考虑dom1下子节点的问题。
但是，现在我们是将dom1移到dom2下了。react会执行以下操作。
在原有dom2节点，新建dom1，然后在依次新建dom1的子节点。
最后删除原来dom1节点。
没错，就是新建然后删除操作。这就是react针对特殊情况的特殊对待。
但是针对这种特殊情况，会大大影响性能，所以应该避免dom节点跨层操作的为标题

2.不同类的组件很少存在相似DOM的情况，只会比较同类组件

针对组件，拥有同一类的两个组件将按照原策略进行比较，拥有不同类的两个组件将会生成不同的树结构，当react判断组件为dirty component，从而替换整个组件下所有子节点。
用户可以通过shouldComponentUpdate()来判断是否需要更新组件。
如果，在开发中我们需要将A组件换成B组件，A与B不是同类组件时，react会毫不犹豫的删除A，新建B及其子节点。不管A与B是否有相同的结构。
但是假如在不同类，但是结构相似的dom，将会大大影响react性能。
react官方也说过，在开发过程中不同类型很少存在相似dom树。

3.当节点处于同一层级时候。

(1).新组建类型不存在旧的集合里，对新节点执行插入makeInsertMarkup()
(2).旧的集合里有新的组件类型，引动操作。makeMove()
(3).旧的组件类型在新的集合里就有，但是不能直接服用，或者则执行makeRemove()操作。
react通过对同一级别的同组节点添加唯一的key值，进行区分。
react首先会对新集合循环遍历，通过位移的key值判断新旧集合中是否存在相同的节点，如果存在，则进行移动操作，否则不执行操作。
执行移动操作：
当前节点在旧集合位置mountIndex与旧集合中lastIndex(表示访问过的节点在旧集合中最右侧的位置，会一直变化)进行比较。
如果新节点中访问的节点比lastIndex大，证明访问的节点比旧集合最后一个节点还靠右，因此该节点不会影响其他节点，不需要添加到差异队列中。只用小于lastIndex时，才会进行操作。

通过上文我们可以了解react的diff将传统的循环迭代比较，通过自己特有的规则，优化了很多。规则1就是，react忽略dom节点跨层级的移动操作。其次，react只会比较同类组件。要是万一出现特殊情况呢，react针对特殊情况将实现新增删除操作。但是，这样会对react本身性能有很大影响。
所以在开发中我们也要避免，尽量不做跨层操作，在设计组件开发的时候，相似dom树，可以想办法设计相同的类。当然，更要避免新增删除dom，而是用属性控制。最简单的例子：
将下面代码

if(...){
    dom = (<div>
          ....
    </div>)
}else{
    dom =null;
}

用如下代替

if(...){
      attrs = {display:'block'}
}else{
      attrs =  {display:'none'}
}
<div style={attr}>...</div>

这个例子很简单，因为作者见到过这样用的，(曾经面试过这样一个人，自称熟悉，做过很多项目，但是...不过确实第一种很节省时间)就在这里做个反面教材。
其实在做更大的项目，开发更复杂的组件的时候，我们会针对react这些特性设计出性能更加强大的组件，这才是由小白与大神真正的区别 ， 额--之一。这就是有可能你做了很多项目但是你依然是个小白，而有些人做的项目并不是很多却已经成为大神了。
React基础1--生命周期详解
React基础2--深入挖掘setState

如果有些错的地方欢迎留言。不过作者肯定懒得改。