A brief comparison of handwritten objects (the difference between pureComponent and Component in React)

The difference between PureComponent and Component

        PureComponent will add a periodic function such as shouldComponentUpdate by default to the class component.

  //PureComponent类似自动加了这段
  shouldComponentUpdate(nextProps,nextState){
    let { props, state } = this;
    // props/state:修改之前的属性状态
    // nextProps/nextState: 将要修改的属性状态
    return !shallowEqual(props,nextProps) || !shallowEqual(state,nextState)
  }

•   In this periodic function, it will make a shallow comparison between the new and old attributes/states.
•   If after a shallow comparison, it is found that the properties and status have not changed, then return false (that is, the component will not continue to be updated), and it will be updated only if there are changes! !
• When using component, when the state or prop of the parent component is updated, regardless of whether the state or prop of the child component is updated, the update of the child component will be triggered. This will cause a lot of unnecessary renders and waste a lot of performance;
• The advantage of pureComponent is that pureComponent only performs shallow comparisons in shouldComponentUpdate. As long as the outer object has not changed, render will not be triggered, reducing unnecessary renders. When encountering complex data structures, a component can be split into Multiple pureComponents are used to implement complex data structures in order to save unnecessary rendering, such as forms, complex lists, text fields, etc.

Advantages and disadvantages of pureComponent:

1. Advantages of pureComponent: developers can use simple judgments to improve performance without using shouldComponentUpdate;

2. Disadvantages of pureComponent: Due to the shallow comparison, wrong negative judgments may be generated due to deep data inconsistencies, resulting in the page not being updated;

A shallow comparison of handwritten objects

1. The meaning of shallow comparison: only compare the first level of the object, and no further comparison will be made for the deep content.

2. A brief comparison of the implementation idea diagram

3. Code implementation and annotation ideas

//检测是否为对象
const isObject = function isObject(obj) {
  return obj !== null && /^(object|function)$/.test(typeof obj); //typeof obj === "object"
};
//对象的浅比较
const shallowEqual = function shallowEqual(objA, objB) {
  if (!isObject(objA) || !isObject(objB)) return false; //如果有一个不是对象就返回false
  if (objA === objB) return true;
  // 先比较成员的数量
  let keysA = Reflect.ownKeys(objA),
    keysB = Reflect.ownKeys(objB);

  if (keysA.length !== keysB.length) return false;
  //数量一致，再逐一比较内部的成员（只比较第一级：浅比较）
  for (let i = 0; i < keysA.length; i++) {
    let key = keysA[i];
    // 如果一个对象中有这个成员，一个对象中没有，或者都有这个成员，但是成员值不一样，都应该被判定为不相同！！
    //NAN ===NAN 返回是false
    //Object.is(NAN,NAN) 返回是true 底层也是三个等号
    if (!objB.hasOwnProperty(key) || !Object.is(objA[key], objB[key])) {
      //objA[key] !== objB[key]
      return false;
    }
  }
  //以上都处理完，发现没有不相同的成员，则认为两个对象是相等的
  return true;
};