react中PureComponent的實現

Component和PureComponent最大的不一樣是PureComponent經過shouldComponentUpdate()來比較prop和state的新舊值，從而決定是是否更新組件，固然這裏的比較是淺比較（shallowEqual），這裏貼一段實現PureComponent的代碼：

import React, { Component } from 'react'

export default class PureComponent extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    return (
      !shallowEqual(this.props, nextProps) ||
      !shallowEqual(this.state, nextState)
    )
  }
}

function shallowEqual(obj1, obj2) {
  if (obj1 === obj2) return true
  if (
    obj1 === null ||
    obj2 === null ||
    typeof obj1 !== 'object' ||
    typeof obj2 !== 'object'
  ) {
    return false
  }
  let keys1 = Object.keys(obj1)
  let keys2 = Object.keys(obj2)
  if (keys1.length !== keys2.length) return false

  for (let name of keys1) {
    if (!obj2.hasOwnProperty(name) || obj1[name] != obj2[name]) {
      return false
    }
  }
  return true
}

函數組件也能夠用React.memo實現PureComponent的效果：

function memo(FunComp){
  return class extends React.PureComponent{
    render(){
      return <FunComp {...this.props} />
    }
  }
}