淺談React 中的淺比較是如何工作的

更新時間：2022年04月26日 15:26:49 作者：CUGGZ

React 中淺比較的概念無處不在，它在不同的流程中起著關(guān)鍵的作用，本文主要介紹了React 中的淺比較是如何工作的，具有一定的參考價值，感興趣的可以了解一下

React 中淺比較的概念無處不在，它在不同的流程中起著關(guān)鍵的作用，也可以在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í)行了很多步操作，下面就來將其拆分并逐步執(zhí)行這些功能。先來看看函數(shù)的定義，這個函數(shù)接受兩個需要比較的對象，這里的代碼使用 Flow 作為類型檢查系統(tǒng)。兩個函數(shù)參數(shù)都是使用特殊的混合 Flow 類型定義，類似于 TypeScript 的 unknown，它表明函數(shù)可以是任何類型的值。

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

之后使用 React 內(nèi)部對象的 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ù)值相等或者引用同一個對象的所有簡單情況之后，來看看更復雜的結(jié)構(gòu)：數(shù)組和對象。
為了確保現(xiàn)在要處理的是兩個復雜的結(jié)構(gòu)，代碼會檢查任一參數(shù)是不是object類型或者等于null，前者用來確保我們處理的數(shù)組或?qū)ο?，后者用來過濾掉空值，因為typeof null的結(jié)果也是 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ù)結(jié)構(gòu)的值，并在兩個函數(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，結(jié)束循環(huán)。如果所有的值都是相等的，就返回 true。

至此，我們通過 React 源碼學習了 React 中的淺比較，下面來總結(jié)一下其中有趣的知識吧：