React 中淺比較的概念無處不在，它在不同的流程中起著關鍵的作用。比如，React Hooks 中的依賴數(shù)組，通過 React.memo 進行記憶。在 React 的官方文檔中也多次提到淺比較的概念，下面就來看看 React 中的淺比較是如何工作的!

要想理解淺比較的概念，最直接的方法就是研究 React 相關的源碼，下面就來看看React中的shallowEqual.js 文件：

import is from './objectIs';
import hasOwnProperty from './hasOwnProperty';

/**
 * 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;
  }

  if (
    typeof objA !== 'object' ||
    objA === null ||
    typeof objB !== 'object' ||
    objB === null
  ) {
    return false;
  }

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

  if (keysA.length !== keysB.length) {
    return false;
  }
  
  // Test for A's keys different from B.
  for (let i = 0; i < keysA.length; i++) {
    const currentKey = keysA[i];
    if (
      !hasOwnProperty.call(objB, currentKey) ||
      !is(objA[currentKey], objB[currentKey])
    ) {
      return false;
    }
  }

  return true;
}

這里執(zhí)行了多步操作，下面就來將其拆分并逐步解釋這些功能。先來看看函數(shù)的定義，這個函數(shù)接受兩個需要比較的對象，這里的代碼使用 Flow 作為類型檢查系統(tǒng)。兩個函數(shù)參數(shù)都是使用特殊的混合 Flow 類型定義，類似于 TypeScript 的 unknown，它表明函數(shù)可以是任何類型的值。

function shallowEqual(objA: mixed, objB: mixed): boolean {
 // ...
}

之后使用 React 內部對象的 is 函數(shù)將兩個函數(shù)參數(shù)進行比較。導入的 is 函數(shù)只不過是JavaScript 的 Object.is 函數(shù)的polyfill 版本。這個比較函數(shù)基本上等同于常見的 === 運算符，但有兩個例外：

• Object.is 認為 +0 和 -0 不相等，而 === 認為它們相等;
• Object.is 認為 Number.NaN 和 NaN 相等，而 === 認為它們不相等。

基本上，第一個條件語句可以處理所有簡單的情況：如果兩個函數(shù)參數(shù)具有相同的值，對于原始類型，或引用相同的對象(數(shù)組和對象)，那么通過淺比較認為它們相等的。

import is from './objectIs';

function shallowEqual(objA: mixed, objB: mixed): boolean {
  if (is(objA, objB)) {
    return true;
  }
 // ...
}

在處理兩個函數(shù)參數(shù)值相等或者引用同一個對象的所有簡單情況之后，來看看更復雜的結構：數(shù)組和對象。

為了確保現(xiàn)在要處理的是兩個復雜的結構，代碼會檢查任一參數(shù)是不是object類型或者等于null，前者用來確保我們處理的數(shù)組或對象，后者用來過濾掉空值，因為typeof null的結果也是 object。如果任何一個條件成立，那兩個參數(shù)一定是不相等的(否則前面的條件語句就會將它們過濾掉)，因此淺比較直接返回false。

function shallowEqual(objA: mixed, objB: mixed): boolean {
 // ...

  if (
    typeof objA !== 'object' ||
    objA === null ||
    typeof objB !== 'object' ||
    objB === null
  ) {
    return false;
  }

 // ...
}

現(xiàn)在就可以確保我們處理的是數(shù)組和對象了，接下來我們深入研究復雜數(shù)據(jù)結構的值，并在兩個函數(shù)參數(shù)之間進行比較。在此之前，先來檢查兩個參數(shù)中值的數(shù)量是否相等，如果不相等，直接就可以確定兩個值是不相等的。對于對象，得到的keys數(shù)組就是由實際的key組成的;對于數(shù)組，得到keys數(shù)組數(shù)是由字符串類型的數(shù)組索引組成的。

function shallowEqual(objA: mixed, objB: mixed): boolean {
 // ...

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

  if (keysA.length !== keysB.length) {
    return false;
  }

 // ...
}

最后一步，按照 key 來迭代兩個函數(shù)參數(shù)的值，并逐個驗證他們是否是相等的。為此，代碼使用到了上一步中生成的keys數(shù)組，使用 hasOwnProperty 檢查key是否實際上是參數(shù)的屬性，并使用 Object.is 函數(shù)進行比較。

import hasOwnProperty from './hasOwnProperty';

function shallowEqual(objA: mixed, objB: mixed): boolean {
 // ...

  // Test for A's keys different from B.
  for (let i = 0; i < keysA.length; i++) {
    const currentKey = keysA[i];
    if (
      !hasOwnProperty.call(objB, currentKey) ||
      !is(objA[currentKey], objB[currentKey])
    ) {
      return false;
    }
  }

  return true;
}

如果任何兩個key對應的值是不相等的，那兩個對象肯定就是不相等的，因此直接人會false，結束循環(huán)。如果所有的值都是相等的，就返回 true。

至此，我們通過 React 源碼學習了 React 中的淺比較，下面來總結一下：

• 淺比較使用的是 Object.is 函數(shù)，而不是使用嚴格相等 === 運算符;
• 通過淺比較，空對象和空數(shù)組是等價的;
• 通過淺比較，以數(shù)組索引為 key 和數(shù)組值為value的對象是等價的，比如：{ 0: 2, 1: 3 } 等價于 [2, 3];
• 由于通過Object.is比較的+0 和 -0、Number.NaN 和 NaN是不相等的，所以在復雜結構中比較時，這也是適用的;
• 雖然 {} 和 [] 淺比較是相等的，但是嵌套在對象中是不相等的，比如：{ someKey: {} } 和 { someKey: [] } 是不相等的。

源碼：https://github.com/facebook/react/blob/main/packages/shared/shallowEqual.js