React之diff算法源码解析

没时间详细写 都写在注释里面了，有空细说

diff.js

zzvar _ = require('./util')
var patch = require('./patch')
var listDiff = require('list-diff2')

function diff (oldTree, newTree) {
  var index = 0
  var patches = {}
  dfsWalk(oldTree, newTree, index, patches)
  return patches
}

function dfsWalk (oldNode, newNode, index, patches) {
  var currentPatch = []

  // 节点被移除Node is removed.
  if (newNode === null) {
  // Real DOM node will be removed when perform reordering, 
  // so has no needs to do anthings in here
  
  //节点为文本 内容改变TextNode content replacing
  } else if (_.isString(oldNode) && _.isString(newNode)) {
    if (newNode !== oldNode) {
      currentPatch.push({ type: patch.TEXT, content: newNode })
    }

  //节点类型相同 遍历属性和孩子
  // Nodes are the same, diff old node's props and children
  } else if (
      oldNode.tagName === newNode.tagName &&
      oldNode.key === newNode.key
    ) {

    // Diff props 遍历属性
    var propsPatches = diffProps(oldNode, newNode)
    if (propsPatches) {
      currentPatch.push({ type: patch.PROPS, props: propsPatches })
    }

    // Diff children. If the node has a `ignore` property, do not diff children
    // 遍历孩子
    if (!isIgnoreChildren(newNode)) {
      diffChildren(
        oldNode.children,
        newNode.children,
        index,
        patches,
        currentPatch
      )
    }

  // 节点类型不同 新节点直接替换旧节点Nodes are not the same, replace the old node with new node
  } else {
    currentPatch.push({ type: patch.REPLACE, node: newNode })
  }

  //index是每个节点都有的一个索引 每个！
  if (currentPatch.length) {
    patches[index] = currentPatch
  }
}

//为什么这里要把子节点的递归单独写出来 而不直接写在dfswalk函数里面呢？
//我认为其实非要写也是可以写进dfswalk里面的，但是为了功能分离、解耦所以单独提出来写
function diffChildren (oldChildren, newChildren, index, patches, currentPatch) {
  //该key就指的是循环绑定上的key值
  var diffs = listDiff(oldChildren, newChildren, 'key')
  newChildren = diffs.children

  if (diffs.moves.length) {
    var reorderPatch = { type: patch.REORDER, moves: diffs.moves }
    currentPatch.push(reorderPatch)
  }

  var leftNode = null
  var currentNodeIndex = index
  _.each(oldChildren, function (child, i) {
    var newChild = newChildren[i]
    currentNodeIndex = (leftNode && leftNode.count)
    //index当前的节点的标志。因为在深度优先遍历的过程中，每个节点都有一个index
    //count为子节点个数
    //为什么这里是+leftNode.count, 因为每次diffChildren是遍历该节点的子节点按照顺序来
    //自己的第一个子节点是自己的index再加上和左边节点的子节点数也就是leftNode.index
    //第一次进diffchildren函数肯定是第一个节点，不存在有左边的节点，所以...
      ? currentNodeIndex + leftNode.count + 1
    //
      : currentNodeIndex + 1
    dfsWalk(child, newChild, currentNodeIndex, patches)
    leftNode = child
  })
}

function diffProps (oldNode, newNode) {
  var count = 0
  var oldProps = oldNode.props
  var newProps = newNode.props

  var key, value
  var propsPatches = {}

  // Find out different properties
  for (key in oldProps) {
    value = oldProps[key]
    if (newProps[key] !== value) {
      count++
      propsPatches[key] = newProps[key]
    }
  }

  // Find out new property
  for (key in newProps) {
    value = newProps[key]
    if (!oldProps.hasOwnProperty(key)) {
      count++
      propsPatches[key] = newProps[key]
    }
  }
  // If properties all are identical
  if (count === 0) {
    return null
  }
  return propsPatches
}



function isIgnoreChildren (node) {
  return (node.props && node.props.hasOwnProperty('ignore'))
}

module.exports = diff

list-diff.js 用于比对同一层的节点

/**
 * Diff two list in O(N).
 * @param {Array} oldList - Original List
 * @param {Array} newList - List After certain insertions, removes, or moves
 * @return {Object} - {moves: }
 *                  - moves is a list of actions that telling how to remove and insert
 */
function diff (oldList, newList, key) {
  var oldMap = makeKeyIndexAndFree(oldList, key)
  var newMap = makeKeyIndexAndFree(newList, key)

  var newFree = newMap.free

  //oldKeyIndex和newKeyIndex是以节点为key，index为值的一个对象
  var oldKeyIndex = oldMap.keyIndex
  var newKeyIndex = newMap.keyIndex

  var moves = []

  // a simulate list to manipulate
  var children = []
  var i = 0
  var item
  var itemKey
  var freeIndex = 0

  // first pass to check item in old list: if it's removed or not
  while (i < oldList.length) {
    item = oldList[i]
    itemKey = getItemKey(item, key)
    if (itemKey) {
      //如果该旧节点的key值 在新节点中不存在 push null
      if (!newKeyIndex.hasOwnProperty(itemKey)) {
        children.push(null)
      //如果存在，则把该节点push进children数组
      } else {
        var newItemIndex = newKeyIndex[itemKey]
        children.push(newList[newItemIndex])
      }
    //如果旧节点本身不存在，判断新节点中是不是也不存在？
    } else {
      var freeItem = newFree[freeIndex++]
      children.push(freeItem || null)
    }
    i++
  }

  //simulateList里面是旧树和新树里面都存在的节点，新树单独有的新节点并不在里面
  var simulateList = children.slice(0)

  //移除不存在的节点
  // remove items no longer exist
  i = 0
  while (i < simulateList.length) {
    if (simulateList[i] === null) {
      remove(i)
      removeSimulate(i)
    } else {
      i++
    }
  }

  // i is cursor pointing to a item in new list
  // j is cursor pointing to a item in simulateList
  var j = i = 0
  while (i < newList.length) {
    item = newList[i]
    itemKey = getItemKey(item, key)

    var simulateItem = simulateList[j]
    var simulateItemKey = getItemKey(simulateItem, key)

    if (simulateItem) {
      //新树中的此节点不为新增节点(依据：同一位置的key是否相同，即simulateItemKey和itemkey是否一致)
      //两者key相同，说明该节点位置没有改动
      if (itemKey === simulateItemKey) {
        j++

      //此位置节点的key与同位置的simulateList中的节点的key不一致
      //判断是新增节点(依据：旧树中是否有此节点)还是只是移位了
      } 
      else {
        //情况1：旧树中没有此节点，为新增节点，直接插入一个新节点
        // new item, just inesrt it
        if (!oldKeyIndex.hasOwnProperty(itemKey)) {
          insert(i, item)
        } 

        //情况2：旧树中有此节点，说明只是节点移动了位置
        else {
          //if remove current simulateItem make item in right place
          //then just remove it
          //情况2.1当前节点移动被移动
          //simulateList[1,2,3,4,5] newList[2,3,4,5,1]
          var nextItemKey = getItemKey(simulateList[j + 1], key)
          if (nextItemKey === itemKey) {
            remove(i)
            removeSimulate(j)
            j++ // after removing, current j is right, just jump to next one
          } 
        
          else {
            // else insert item
            // 情况2.2当前及之后的多个节点被移动 or 后面的节点移动到了前面
            // simulateList[1,2,3,4,5] newList[3,4,5,1,2]
            // or simulateList[1,2,3,4,5] newList[5,1,2,3,4]
            insert(i, item)
          }
        }
      }
    } 
    //已经遍历完simulateList了(j>=simulateList.length)，如果i还未遍历完newList
    //只能说明在新树末尾增加了一个新节点 直接insert
    else {
      insert(i, item)
    }

    i++
  }

  //if j is not remove to the end, remove all the rest item
  //如果j没有遍历完simulateList，遍历删除剩下的item
  var k = simulateList.length - j
  while (j++ < simulateList.length) {
    k--
    remove(k + i)
  }


  function remove (index) {
    var move = {index: index, type: 0}
    moves.push(move)
  }

  function insert (index, item) {
    var move = {index: index, item: item, type: 1}
    moves.push(move)
  }

  function removeSimulate (index) {
    simulateList.splice(index, 1)
  }

  return {
    moves: moves,
    children: children
  }
}

/**
 * Convert list to key-item keyIndex object.
 * @param {Array} list
 * @param {String|Function} key
 */
function makeKeyIndexAndFree (list, key) {
  var keyIndex = {}
  var free = []
  for (var i = 0, len = list.length; i < len; i++) {
    var item = list[i]
    var itemKey = getItemKey(item, key)
    if (itemKey) {
      keyIndex[itemKey] = i
    } else {
      free.push(item)
    }
  }
  return {
    keyIndex: keyIndex,
    free: free
  }
}

//获取节点的key值
function getItemKey (item, key) {
  //void 666 = undefined 666纯属开玩笑
  if (!item || !key) return void 666
  return typeof key === 'string'
    ? item[key]
    : key(item)
}

exports.makeKeyIndexAndFree = makeKeyIndexAndFree // exports for test
exports.diff = diff