Component,PureComponent-React源码解析(二)

1.什么是Component，PureComponent？

都是class方式定义的基类,两者没有什么大的区别,只是PureComponent内部使用shouldComponentUpdate(nextProps,nextState)方法，通过浅比较（比较一层），来判断是否需要重新render()函数，如果外面传入的props或者是state没有变化，则不会重新渲染，省去虚拟dom的生成和对比过程，从而提高性能。

2.PureComponent应用

一般用于纯函数

3.Component源码分析

   /*
      Component 基类
      1.设置react的props，content,refs,updater等属性
      2.要知道class继承是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this
      class A extends React.Component{construcroe(){props){super(props)}}
    */
    function Component(props, context, updater) {
      this.props = props;//父子传递数据
      this.context = context;//爷孙传递数据
      this.refs = emptyObject; //子到父传递数据
      this.updater = updater || ReactNoopUpdateQueue;  //更新数据
    }
    Component.prototype.isReactComponent = {};//给Component原型上添加属性
    /*
     使用setState来改变Component类内部的变量 enqueueSetState调用这个方法实现更新机制
     partialState：要更新的state，可以是object/function
    */
    Component.prototype.setState = function (partialState, callback) {//给Component原型上添加方法
      //判断setState中的partialState是否符合条件 如果不符合 则抛出错误
      if (!(typeof partialState === 'object' || typeof partialState === 'function' || partialState == null)) {
        {
          throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");
        }
      }
      //state的更新机制 在react-dom中实现  不同平台更新内容可能不同
      this.updater.enqueueSetState(this, partialState, callback, 'setState');
    };
    //在Component的深层次改变但是没有调用setState时 调用此方法 强制更新一次
    Component.prototype.forceUpdate = function (callback) {
      this.updater.enqueueForceUpdate(this, callback, 'forceUpdate');
    };

4.PureComponent源码解析

  function ComponentDummy() { }
    // ComponentDummy的原型继承Component的原型 
    ComponentDummy.prototype = Component.prototype;

    function PureComponent(props, context, updater) {//构造函数属性（实例属性），会被实例共享，但不会被修改
      this.props = props;
      this.context = context;
      this.refs = emptyObject;
      this.updater = updater || ReactNoopUpdateQueue;
    }
    //不能直接继承Component 因为如果是直接继承Component 还会继承它的Constructor方法 目的:减少一些内存使用
    var pureComponentPrototype = PureComponent.prototype = new ComponentDummy();
    //实例沿着原型链向上查询，只要是自己继承的，都被认作自己的构造函数
    pureComponentPrototype.constructor = PureComponent;
    //这里做了优化 把 Component.prototype属性浅拷贝到pureComponentPrototype上 防止原型连拉长 导致方法的多层寻找 减少查询次数 
    _assign(pureComponentPrototype, Component.prototype);
    //添加了这个isPureReactComponen参数 来判断是Component还是PureComponent组件
    pureComponentPrototype.isPureReactComponent = true;

5.PureComponent如何实现是否需要更新，来提高性能？

//这个变量用来控制组件是否需要更新 默认为true进行更新操作
var shouldUpdate = true;
// inst是组件实例 如果PureComponent定义有shouldComponentUpdate方法 则和Component基类一样 
if (inst.shouldComponentUpdate) {
  shouldUpdate = inst.shouldComponentUpdate(nextProps, nextState, nextContext);
} else {
  if (this._compositeType === CompositeType.PureClass) {
    // 用shallowEqual函数对比 props 和 state 的改动
    // 如果都没改变就不用更新
    shouldUpdate =
      !shallowEqual(prevProps, nextProps) ||
      !shallowEqual(inst.state, nextState);
  }
}

1.shallowEqual函数解析

目的:比较值相等，或者对象含有相同的属性、且属性值是否相等

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;
 }
}

1.理解：is()函数 x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y 解决了NaN不等于NaN的情况和-0===+0的情， 实现了Object.is

+0 === -0 //true
NaN === NaN // false
Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

2.Object.prototype.hasOwnProperty 用来判断某个属性是否是对象自身的属性

3.浅比较的使用

对象的value是简单数据类型

const a={c:1,d:2}
const b={c:1,d:2}
Object.is(a,b) //false
hasOwnProperty.call(b, 'c') //true
Object.is(a['c'], b['c']) //true

对象的value有复杂数据类型

 const a={c:{e:3},d:2}
 const b={c:{e:3},d:2}
 hasOwnProperty.call(b, 'c') //true
 //可以看到，只能用于浅比较 这里会出现错误判定 从而重新更新render 
 Object.is(a['c'], b['c']) //false

注意点：shouldComponentUpdate(nextProps,nextState) 返回false阻止更新挂载阶段是不起作用的更新阶段起作用图如下

Component,PureComponent-React源码解析(二)

猜你喜欢