为什么ComponentUpdate钩子在React中不起作用？

Question

我已经开始学习react.js，并在其生命周期中获得了这种shouldComponentUpdate方法。作为回报，我通过false仍然会影响dom。在我的参考视频中，它不会影响dom。

render（）以上

shouldComponentUpdate ( nextProps, nextState ) {
    console.log( 'In shouldComponentUpdate', nextProps, nextState );        
    return false;
}

我正在使用以下版本："react": "^16.9.0",

Answer 1

shouldComponentUpdate生命周期在每个组件渲染上启动。

在您的情况下，如果希望它记录某些内容，则需要通过组件的父亲（渲染父亲以使其渲染其子对象）或通过自渲染（例如更改其状态）来进行组件渲染：

export default class App extends React.Component {
  state = { counter: 0 };
  shouldComponentUpdate(nextProps, nextState) {
    console.log('In shouldComponentUpdate', nextProps, nextState);
    return false;
  }

  render() {
    return (
      <FlexBox>
        <Button onClick={() => this.setState({ counter: this.counter + 1 })}>
          Counter
        </Button>
      </FlexBox>
    );
  }
}

Answer 2

在更新期间，shouldComponentUpdate在render方法之前被调用。它告诉组件是否需要重新渲染。并且如果shouldComponentUpdate返回false，则不会重新呈现该组件。

就您而言，

shouldComponentUpdate ( nextProps, nextState ) {
    console.log( 'In shouldComponentUpdate', nextProps, nextState );        
    return false;
}

console.log被触发，但是由于您返回的是false，因此此后组件将不会重新渲染。

您可以在此处的示例中进行检查：

在componentShouldUpdate中返回false时，计数不会增加，而在返回true时，计数不会增加。