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

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

react-redux的淺比較

誤區

相關文章