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源碼的這一部分

再次向被我誤導的那位同窗說聲對不起。深感慚愧。