PureComponent中的浅比较

react dom 18.2.0
shouldComponentUpdate
1、先用object.is判断
2、在判断A和B是否是null
3、A和B的keys长度比较
4、A和B的key是否相同 或者 A和B的value值是否相同

function shallowEqual(objA, objB) {
  if (objectIs(objA, objB)) {
    return true;
  }

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

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

  if (keysA.length !== keysB.length) {
    return false;
  } // Test for A's keys different from B.


  for (var i = 0; i < keysA.length; i++) {
    var currentKey = keysA[i];

    if (!hasOwnProperty.call(objB, currentKey) || !objectIs(objA[currentKey], objB[currentKey])) {
      return false;
    }
  }

  return true;
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 为什么用 PureComponent ? PureComponent 是优化 React 应用程序最重要的方法之一...
    夏天_5de1阅读 2,721评论 0 4
  • 前端开发面试题 <a name='preface'>前言</a> 只看问题点这里 看全部问题和答案点这里 本文由我...
    自you是敏感词阅读 784评论 0 3
  • PureComponent是react中创建组件的一种方式,可以减少不必要的更新,进而提升性能,每次更新会自动帮你...
    指尖跳动阅读 2,971评论 0 2
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,606评论 0 7
  • 代码切割 懒加载 React.lazy React.lazy 目前只支持默认导出 异常捕获边界 基于路由的代码分割...
    前端小白的摸爬滚打阅读 242评论 0 0