React优化点滴

谈到React优化，估计说的最多的就是减少子组件渲染，减少真实DOM节点操作等。

1. shouldComponentUpdate， 通过对Props和State的浅比较，如果没有变化，return false，避免重复多余的render方法调用，省去虚拟DOM的生成和对比过程，提高性能。

　早期类似的技术有pureRender，16版本中可以直接对class组件继承PureComponent，它的实现其实也很简单，也只是浅比较，因为过深的比较也会消耗很多的时间，或许还比render方法的消耗大。

　注意这里的浅比较，基础类型比较值是否相等，不等则需要再次渲染；对于引用类型，先比较引用的地址，地址相同，不渲染，地址不同，判断两个对象的keys的长度，长度不等，则需要渲染，相等则对第一层属性比较，如果有不同，则渲染，否则不渲染。下面的code则是核心主要逻辑。

注意object.is(ES6)和===的主要区别，是object.is（+0,-0） === false, Object.is(NaN,Nan) === false

function is(x, y) { //处理了基本类型的比较
  //1，针对+0===-0的情况
  //2. 针对NaN！==NanN的情况
  return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y 
  ;
}
var is$1 = typeof Object.is === 'function' ? Object.is : is;
var hasOwnProperty$2 = Object.prototype.hasOwnProperty;

//返回值：false更新  true不更新
function shallowEqual(objA, objB) {
  if (is$1(objA, objB)) {//基本数据类型 不更新
    return true;
  }
 //由于Object.is 可以对基本数据类型做一个精确的比较 如果不等只有一种情况 那就是object， objA/objB中，只要有一个不是object或为null则返回false
  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
    return false;
  }
  //过滤掉基本数据类型 就是对象比较 首先比较长度 优化性能
 //比较oldProps和新的Props以及oldState和newState长度是否相同 如果长度不同则重新更新渲染 如果长度相同则不用重新渲染 如果不相等 不会往下执行 优化性能
  var keysA = Object.keys(objA);
  var keysB = Object.keys(objB);
  if (keysA.length !== keysB.length) {
    return false;  
  }
   //如果key相等
   //如果objA的属性不在objB里，或者是objA的属性值和objB的属性值不等 则重新渲染 不考虑当keysA[i]为对象的多层问题 浅显比较 提高性能
   for (var i = 0; i < keysA.length; i++) { 
       if (!hasOwnProperty$2.call(objB, keysA[i]) || !is$1(objA[keysA[i]], objB[keysA[i]])) {
      return false;
    }
  return true;
 }
}

标签：keysA,objA,false,Object,React,objB,return,优化,点滴
来源： https://www.cnblogs.com/roy1/p/13832424.html