当前位置： 移动技术网 > IT编程>开发语言>JavaScript > react中PureComponent浅对比策略

react中PureComponent浅对比策略

2019年04月19日  | 移动技术网IT编程  | 我要评论

purecomponent实现了component中没有实现的shoucomponentupdata()方法，会对state和props进行一次浅对比，本文介绍一下浅对比策略

源码中，实现浅对比的函数是：shallowequal()，源码：

//shouldcomponentupdate 源码: 判断是不是purereactcomponent，是的话，返回shallowequal（）
if (ctor.prototype && ctor.prototype.ispurereactcomponent) {
    return (
      !shallowequal(oldprops, newprops) || !shallowequal(oldstate, newstate)
    );
  }
// shallowequal方法源码：
const hasownproperty = object.prototype.hasownproperty;
// 这个is函数，处理了基本类型对比。
function is(x, y) {
  // samevalue algorithm
  if (x === y) {
    // steps 1-5, 7-10
    // steps 6.b-6.e: +0 != -0
    // added the nonzero y check to make flow happy, but it is redundant
    return x !== 0 || y !== 0 || 1 / x === 1 / y;
  } else {
    // step 6.a: nan == nan
    return x !== x && y !== y;
  }
}
/**
 * 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;
  }
// 由于obejct.is()可以对基本数据类型做一个精确的比较， 所以如果不等
  // 只有一种情况是误判的，那就是object,所以在判断两个对象都不是object
  // 之后，就可以返回false了
  if (
    typeof obja !== 'object' ||
    obja === null ||
    typeof objb !== 'object' ||
    objb === null
  ) {
    return false;
  }
 // 过滤掉基本数据类型之后，就是对对象的比较了
  // 首先拿出key值，对key的长度进行对比
  const keysa = object.keys(obja);
  const keysb = object.keys(objb);
  if (keysa.length !== keysb.length) {
    return false;
  }
  /// key值相等的时候
  // 借用原型链上真正的 hasownproperty 方法，判断objb里面是否有a的key的key值
  // 属性的顺序不影响结果也就是{name:'daisy', age:'24'} 跟{age:'24'，name:'daisy' }是一样的
  // 最后，对对象的value进行一个基本数据类型的比较，返回结果
  for (let i = 0; i < keysa.length; i++) {
    if (
      !hasownproperty.call(objb, keysa[i]) ||
      !is(obja[keysa[i]], objb[keysa[i]])
    ) {
      return false;
    }
  }

  return true;
}

export default shallowequal;

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网