Una breve comparación de objetos escritos a mano (la diferencia entre pureComponent y Component en React)

La diferencia entre PureComponent y Component

        PureComponent agregará una función periódica como deberíaComponentUpdate de forma predeterminada al componente de clase.

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

•   En esta función periódica, hará una comparación superficial entre los atributos/estados nuevos y antiguos.
•   Si después de una comparación superficial, se descubre que las propiedades y el estado no han cambiado, devuelva falso (es decir, el componente no continuará actualizándose) y se actualizará solo si hay cambios. !
• Cuando se utiliza un componente, cuando se actualiza el estado o la propiedad del componente principal, independientemente de si se actualiza el estado o la propiedad del componente secundario, se activará la actualización del componente secundario, lo que provocará muchos renderizados y desperdicios innecesarios. mucho rendimiento;
• La ventaja de pureComponent es que pureComponent solo realiza comparaciones superficiales en mustComponentUpdate. Mientras el objeto externo no haya cambiado, no se activará el renderizado, lo que reduce el renderizado innecesario. Cuando se encuentran estructuras de datos complejas, un componente se puede dividir en Se utilizan varios pureComponents implementar estructuras de datos complejas para ahorrar renderizaciones innecesarias, como formularios, listas complejas, campos de texto, etc.

Ventajas y desventajas de pureComponent:

1. Ventajas de pureComponent: los desarrolladores no necesitan utilizar shouldComponentUpdate para utilizar juicios simples para mejorar el rendimiento;

2. Desventajas de pureComponent: debido a la comparación superficial, pueden producirse juicios negativos incorrectos debido a profundas inconsistencias en los datos, lo que hace que la página no se actualice;

Una comparación superficial de objetos escritos a mano.

1. El significado de comparación superficial: compare solo el primer nivel del objeto y no se realizarán más comparaciones para el contenido profundo.

2. Una breve comparación del diagrama de ideas de implementación.

3. Implementación de código e ideas de anotaciones.

//检测是否为对象
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;
};