脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React 浅比较

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

 更新时间：2022年04月26日 15:26:49   作者：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 版本。 这个比较函数基本上等同于常见的 === 运算符，但有两个例外：

  • Object.is 认为 +0 和 -0 不相等，而 === 认为它们相等；
  • Object.is 认为 Number.NaN 和 NaN 相等，而 === 认为它们不相等。

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

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 中的浅比较，下面来总结一下其中有趣的知识吧：

  • 浅比较使用的是 Object.is 函数，而不是使用严格相等 === 运算符；
  • 通过浅比较，空对象和空数组是等价的；
  • 通过浅比较，以数组索引为 key 和数组值为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

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

您可能感兴趣的文章:

相关文章

  • React深入了解原理

    React深入了解原理

    React是用于构建用户界面的JavaScript库， [1]  起源于Facebook的内部项目，该公司对市场上所有 JavaScript MVC框架都不满意，决定自行开发一套，用于架设Instagram的网站
    2022-07-07
  • react函数组件类组件区别示例详解

    react函数组件类组件区别示例详解

    这篇文章主要为大家介绍了react函数组件类组件区别示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • react实现路由动画跳转功能

    react实现路由动画跳转功能

    这篇文章主要介绍了react路由动画跳转功能,大概思路是下载第三方库 引用,创建css文件引用,想要实现跳转动画功能,就在那个组件的根节点绑定classname属性即可,在跳转的时候即可实现,需要的朋友可以参考下
    2023-10-10
  • react-router中Link标签和a标签有什么区别

    react-router中Link标签和a标签有什么区别

    本文主要介绍了react-router中Link标签和a标签有什么区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-06-06
  • react-router-dom v6 使用详细示例

    react-router-dom v6 使用详细示例

    这篇文章主要介绍了react-router-dom v6使用详细示例，文章围绕主题展开详细的内容介绍，具有一定的参考价值，感兴趣的小伙伴可以参考一下，希望对你的学习有所帮助
    2022-09-09
  • react PropTypes校验传递的值操作示例

    react PropTypes校验传递的值操作示例

    这篇文章主要介绍了react PropTypes校验传递的值操作,结合实例形式分析了react PropTypes针对传递的值进行校验操作相关实现技巧,需要的朋友可以参考下
    2020-04-04
  • npx create-react-app xxx创建项目报错的解决办法

    npx create-react-app xxx创建项目报错的解决办法

    这篇文章主要介绍了npx create-react-app xxx创建项目报错的解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • 使用React Hooks模拟生命周期的实现方法

    使用React Hooks模拟生命周期的实现方法

    这篇文章主要介绍了使用React Hooks模拟生命周期,本文举例说明如何使用 hooks 来模拟比较常见的 class 组件生命周期，需要的朋友可以参考下
    2023-02-02
  • Webpack3+React16代码分割的实现

    Webpack3+React16代码分割的实现

    这篇文章主要介绍了Webpack3+React16代码分割的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • 使用React Router v6 添加身份验证的方法

    使用React Router v6 添加身份验证的方法

    这篇文章主要介绍了使用React Router v6 进行身份验证完全指南,本文将演示如何使用React Router v6创建受保护的路由以及如何添加身份验证，需要的朋友可以参考下
    2022-05-05

最新评论