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

Question

我已经开始学习 react.js 并且在它的生命周期中，我得到了这个 shouldComponentUpdate 方法。在 return 中，我超过了 false，它仍然影响 dom。在我的参考视频中，它不会影响 dom。

以上渲染（）

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

我正在使用这个版本："react": "^16.9.0",

Answer 1

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

在你的例子中，如果你想让它记录一些东西，你需要通过它的父亲渲染组件（渲染父亲所以它渲染它的children）或通过自我渲染，例如改变它的状态：

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 在渲染方法之前被调用。它告诉组件是否需要重新渲染。如果 shouldComponentUpdate return 为 false，则不会重新渲染组件。

在你的情况下，

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

console.log 被触发，但由于您 returning false，此后组件将不会重新呈现。

您可以从此处的示例中查看：

当您在 componentShouldUpdate 中 return 为 false 时，计数不会增加，而当您 return 为 true 时，计数不会增加。

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

Why shouldComponentUpdate hook is not working in React?

lifecycle

reactjs