React性能优化方法总结

使用React开发的项目，可以从加载性能和运行时性能两个方面进行优化。

加载性能优化的目标是让用户更早地看到界面、更早地和应用交互。运行时性能优化目标是降低卡顿，交互更流畅。

运行时

1. 避免不必要的渲染

我们知道React的setState会触发diff和更新。默认是将整个组件树进行对比，但很多情况下diff是不必要的，因为一个子组件的props没有改变，就不需要进行diff工作。

为了避免这种对没有改变props的子组件进行多余的diff工作的情况，React提供了shouldComponentUpdate这个生命周期钩子，shouldComponentUpdate(nextProps, nextState)。 这个生命周期钩子如果返回true，则会执行后面的render和diff工作，如果返回false，则React不会向下继续。用户可以在这个生命周期钩子中进行state和props的对比，判断是否需要更新。通常一个组件当前的props与nextProps属性值相同，并且state的属性值也相同，则不需要更新。

React.PureComponent实现了shouldComponentUpdate这个方法，PureComponent采用了浅比较，

function shallowEqual(objA, objB) {
    if (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 (!hasOwnProperty.call(objB, keysA[i]) || objA[keysA[i]] !== objB[keysA[i]]) {
            return false;
        }
    }
    return true;
}

【前端面试刷题网站：灵题库，收集大厂面试真题，相关知识点详细解析。】

对应class组件的PureComponent，函数组件有React.memo方法实现类似的效果。

React.memo

由于默