PurComponent 原理

shouldComponentUpdate + 浅比较

import React, { Component } from 'react';

// 浅比较原理：只作对象的每个 key 的引用比较，不深层遍历比较
function shallowEqual(obj1, obj2) {
  //  这里的is是判断两个值是否相等，只不过是对 + 0 和 - 0，以及 NaN 和 NaN 的情况进行了特殊的处理封装，目前react源码中好像有一套新的is判断
  if (obj1 === obj2) {
    return true
  }
  // 判断是否为对象类型
  let noObj1 = typeof obj1 !== 'object' || obj1 === null
  let noObj2 = typeof obj2 !== 'object' || obj2 === null
  if (noObj1 || noObj2) {
    return false
  }
  // 比较两个对象的，属性数量是否相等
  let keys1 = Object.keys(obj1)
  let keys2 = Object.keys(obj2)
  if (keys1.length !== keys2.length) {
    return false
  }
  // 比较两个对象的的属性是否相等，值是否相等
  for (const key of keys1) {
    if (!obj2.hasOwnProperty(key) || !obj1[key] === obj2[key]) {
      return false
    }
  }
  return true
}


class PureComponent extends Component {
  // shouldComponentUpdate原理
  shouldComponentUpdate(nextProps, nextState) {
    let equalProps = shallowEqual(this.props, nextProps)
    let equalState = shallowEqual(this.state, nextState)
    return !equalProps || !equalState
  }
  render() {
    return this.props.children;
  }
}

export default PureComponent;

参考文章

• PureComponent 原理