react-redux的浅比较

原文： 从源码看浅比较

以前看react-redux的源码，记录了一些东西，而后前两天闲着没事看了下浅比较（以前知道浅比较，可是没有看源码，和本身想象中的浅比较基本就是那么一回事）。

看react-redux源码的记录在clone下来的代码库里。 若是你也在看或准备看源码，但愿会对你有所帮助吧。

下面是浅比较部分的代码解析：

const hasOwn = Object.prototype.hasOwnProperty
// 下面就是进行浅比较了, 有不了解的能够提issue, 到时能够写一篇对比的文章。
function is(x, y) {
  // === 严格判断适用于对象和原始类型。可是有个例外，就是NaN和正负0。
  if (x === y) {
    //这个是个例外，为了针对0的不一样，譬如 -0 === 0 : true
    // (1 / x) === (1 / y)这个就比较有意思，能够区分正负0, 1 / 0 : Infinity, 1 / -0 : -Infinity
    return x !== 0 || y !== 0 || 1 / x === 1 / y 
  } else {
    // 这个就是针对上面的NaN的状况
    return x !== x && y !== y
  }
}


export default function shallowEqual(objA, objB) {
  if (is(objA, objB)) return true //这个就是实行了Object.is的功能。实行的是SameValue策略。
  // is方法以后，咱们认为他不相等。不相等的状况就是排除了(+-0, NaN)的状况以及能够证实:
  // 原始类型而言： 两个不是同类型或者两个同类型，值不一样。
  // 对象类型而言： 两个对象的引用不一样。

  
  //下面这个就是，若是objA和objB其中有个不是对象或者有一个是null, 那就认为不相等。
  //不是对象，或者是null.咱们能够根据上面的排除来猜测是哪些状况:
  //有个不是对象类型或者有个是null,那么咱们就直接返回，认为他不一样。其主要目的是为了确保两个都是对象，而且不是null。
  if (typeof objA !== 'object' || objA === null ||
      typeof objB !== 'object' || objB === null) {
    return false
  }

  //若是上面没有返回，那么接下来的objA和objB都是对象了。

  const keysA = Object.keys(objA)
  const keysB = Object.keys(objB)

  //两个对象不一样，有多是引用不一样，可是里面的内容倒是相同的。例如：{a: 'a'} ==~ {a: 'a'}
  //因此先简单粗暴的判断一级的keys是否是相同的长度。，不是那就确定不相等，就返回false。
  if (keysA.length !== keysB.length) return false

  //下面就是判断相同长度的key了
  // 能够发现，遍历的是objA的keysA。
  //首先判断objB是否包含objA的key,没有就返回false。注意这个是采用的hasOwnPrperty来判断，能够应付大部分的状况。
  //若是objA的key也在ObjB的key里，那就继续判断key对应的value，采用is来对比。哦，能够发现，只会对比到第以及。

  for (let i = 0; i < keysA.length; i++) {
    if (!hasOwn.call(objB, keysA[i]) ||
        !is(objA[keysA[i]], objB[keysA[i]])) {
      return false
    }
  }

  return true
}
复制代码

误区

这个是react-redux会有对比，我觉得setState也会进行compare, 以致于今个中午成功的误导了别人。其实这个对比不是根据setState这个方法来的，而是根据组件来的。 PureComponent有scu进行浅比较对比，这点各位知道，可是 Component组件的state不会进行对比!!

google了下，都是说只要state改变就会从新渲染，如今的状况是设置同样的也会去从新渲染,好比:

state = {id: 0}

handler = () => this.setState({id: 0})

render(){
    console.log('render')
    //...
}
复制代码

找了几个以后发现没有啥信息，就去翻源码，具体能够查看react源码的这一部分

再次向被我误导的那位同窗说声对不起。深感惭愧。