一文掌握React性能优化

一文掌握React性能优化

 

1 shouldeComponentUpdate

shouldComponentUpdate应该是提到的优化方法里面提到最多的，使用的也是最多的，如果返回false，就会阻止下面组件的渲染，反之，返回true，就会进行接下来的渲染，默认返回的事true。但是有个问题，shouldComponentUpdate进行的是浅比较，为什么不进行深比较，因为伤不起，深比较的耗费性能可能比每次render的效率还要低。

class Nest extends React.Component {
  shouldComponentUpdate = (nextProps, nextState) => {
    return (
      !shallowEqual(this.props, nextProps) ||
      !shallowEqual(this.state, nextState)
    )
  }
  render() {
    console.log('inner')
    return <div>Nest</div>
  }
}

为什么进行的事浅比较，我们从源码方面来看一下:

const hasOwn = Object.prototype.hasOwnProperty

function is(x, y) {
  if (x === y) {
    return x !== 0 || y !== 0 || 1 / x === 1 / y
  } else {
    return x !== x && y !== y
  }
}

export default function shallowEqual(objA, objB) {
  if (is(objA, objB)) return true

  if (typeof objA !== 'object' || objA === null ||
      typeof objB !== 'object' || objB === null) {
    return false
  }

  const keysA = Object.keys(objA)
  const keysB = Object.keys(objB)

  if (keysA.length !== keysB.length) return false

  for (let i = 0; i < keysA.length; i++) {
    if (!hasOwn.call(objB, keysA[i]) |