React性能优化

336 阅读1分钟

shouldComponentUpdate

如果这个钩子不写,内部会返回true.
如果写了,没有显式的写返回值会报错,更新不了

React默认父组件有更新,子组件无条件也更新

性能优化对于React更加重要

shouldComponentUpdate(nextProps, nextState){
    if(nextState.count !== this.state.count){
        return true;
    }
    return false;
}

1、React重新渲染子组件并不一定是性能的瓶颈 2、shouldComponentUpdate必须配合不可变值一起使用 3、可以先不用SCU有性能问题时再考虑使用

PureComponent

PureComponent 实现了在scu中的浅比较 浅比较以能适应大部分情况

class List extends React.PureComponent{
    
}

React.memo适用于函数式组件

function MyComponent(props){
}
function areEuqual(){
}
export default React.memo(MyComponent, areEuqual)