React之shouldComponentUpdate的用法

4,518 阅读1分钟

为什么要使用shouldComponentUpdate?

只要是组件继承自React.Component就会存在当父组件重新render的时候,子组件也会重新执行render,即使这个子组件没有任何变化。子组件只要调用setState就会重新执行render,及时setState的参数是一个空对象。

shouldComponentUpdate的用法

在子组件中:

shouldComponentUpdate(nextProps,nextState) {
    if (nextProps.m1 === this.props.m1 && nextState.m2 === this.state.m2) {
        return false;
    } else {
        return true;
    }
}

根据下面的React生命周期流程图可知,当shouldComponentUpdate返回为true的时候,当前组件进行render,如果返回的是false则不进行render. image.png

codeSandBox在线演示