react中PureComponent淺對比策略

PureComponent實現了Component中沒有實現的shouComponentUpdata()方法，會對state和props進行一次淺對比，本文介紹一下淺對比策略

源碼中，實現淺對比的函數是：shallowEqual()，源碼：

//shouldComponentUpdate 源碼: 判斷是不是PureReactComponent，是的話，返回shallowEqual（）
if (ctor.prototype && ctor.prototype.isPureReactComponent) {
    return (
      !shallowEqual(oldProps, newProps) || !shallowEqual(oldState, newState)
    );
  }

// shallowEqual方法源碼：
const hasOwnProperty = Object.prototype.hasOwnProperty;
// 這個is函數，處理了基本類型對比。
function is(x, y) {
  // SameValue algorithm
  if (x === y) {
    // Steps 1-5, 7-10
    // Steps 6.b-6.e: +0 != -0
    // Added the nonzero y check to make Flow happy, but it is redundant
    return x !== 0 || y !== 0 || 1 / x === 1 / y;
  } else {
    // Step 6.a: NaN == NaN
    return x !== x && y !== y;
  }
}
/**
 * Performs equality by iterating through keys on an object and returning false
 * when any key has values which are not strictly equal between the arguments.
 * Returns true when the values of all keys are strictly equal.
 */
function shallowEqual(objA: mixed, objB: mixed): boolean {
  if (is(objA, objB)) {
    return true;
  }
// 由於Obejct.is()可以對基本數據類型做一個精確的比較， 所以如果不等
  // 只有一種情況是誤判的，那就是object,所以在判斷兩個對象都不是object
  // 之後，就可以返回false了
  if (
    typeof objA !== 'object' ||
    objA === null ||
    typeof objB !== 'object' ||
    objB === null
  ) {
    return false;
  }
 // 過濾掉基本數據類型之後，就是對對象的比較了
  // 首先拿出key值，對key的長度進行對比
  const keysA = Object.keys(objA);
  const keysB = Object.keys(objB);
  if (keysA.length !== keysB.length) {
    return false;
  }
  /// key值相等的時候
  // 借用原型鏈上真正的 hasOwnProperty 方法，判斷ObjB裡面是否有A的key的key值
  // 屬性的順序不影響結果也就是{name:'daisy', age:'24'} 跟{age:'24'，name:'daisy' }是一樣的
  // 最後，對對象的value進行一個基本數據類型的比較，返回結果
  for (let i = 0; i < keysA.length; i++) {
    if (
      !hasOwnProperty.call(objB, keysA[i]) ||
      !is(objA[keysA[i]], objB[keysA[i]])
    ) {
      return false;
    }
  }

  return true;
}

export default shallowEqual;