React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > React 浅比较

浅谈React 中的浅比较是如何工作的

作者：CUGGZ

React 中浅比较的概念无处不在，它在不同的流程中起着关键的作用，本文主要介绍了React 中的浅比较是如何工作的，具有一定的参考价值，感兴趣的可以了解一下

React 中浅比较的概念无处不在，它在不同的流程中起着关键的作用，也可以在React组件的多个生命周期中找到。比如，React Hooks中的依赖数组，通过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;
}

这里执行了很多步操作，下面就来将其拆分并逐步执行这些功能。先来看看函数的定义，这个函数接受两个需要比较的对象，这里的代码使用 Flow 作为类型检查系统。两个函数参数都是使用特殊的混合 Flow 类型定义，类似于 TypeScript 的 unknown，它表明函数可以是任何类型的值。

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

之后使用 React 内部对象的 is 函数将两个函数参数进行比较。导入的 is 函数只不过是JavaScript 的 Object.is 函数的polyfill 版本。 这个比较函数基本上等同于常见的 === 运算符，但有两个例外：

基本上，第一个条件语句可以处理所有简单的情况：如果两个函数参数具有相同的值，对于原始类型，或引用相同的对象（数组和对象），那么通过浅比较认为它们相等的。

import is from './objectIs';

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

在处理两个函数参数值相等或者引用同一个对象的所有简单情况之后，来看看更复杂的结构：数组和对象。
为了确保现在要处理的是两个复杂的结构，代码会检查任一参数是不是object类型或者等于null，前者用来确保我们处理的数组或对象，后者用来过滤掉空值，因为typeof null的结果也是 object。如果任何一个条件成立，那两个参数一定是不相等的（否则前面的条件语句就会将它们过滤掉），因此浅比较直接返回false。

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

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

    // ...
}

现在就可以确保我们处理的是数组和对象了，接下来我们深入研究复杂数据结构的值，并在两个函数参数之间进行比较。在此之前，先来检查两个参数中值的数量是否相等，如果不相等，直接就可以确定两个值是不相等的。对于对象，得到的keys数组就是由实际的key组成的；对于数组，得到keys数组数是由字符串类型的数组索引组成的。

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 来迭代两个函数参数的值，并逐个验证他们是否是相等的。为此，代码使用到了上一步中生成的keys数组，使用 hasOwnProperty 检查key是否实际上是参数的属性，并使用 Object.is 函数进行比较。

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，结束循环。如果所有的值都是相等的，就返回 true。

至此，我们通过 React 源码学习了 React 中的浅比较，下面来总结一下其中有趣的知识吧：

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

到此这篇关于浅谈React 中的浅比较是如何工作的的文章就介绍到这了,更多相关React 浅比较内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文