reactjs - 为什么每当父状态发生变化时，组件更新生命周期就会执行？

Question

我有一个名为“App”的父组件，其中使用了一个名为“NewComp”的子组件。我在子组件中定义了 componentDidUpdate() 生命周期，而不是在父组件中。

父组件：

class App extends Component {

    state = {
      count:0,
    }

    change = () =>{
      this.setState({
        count:this.state.count+1,
      })
    }

    render() {

      return (
        <div>
          <p>Count = {this.state.count}</p>
          <button onClick={this.change}>Add Count</button>
          <NewComp />
        </div>
      );
    }
}

子组件：

export default class NewComp extends Component {

  componentDidUpdate(){
    console.log('Child component did update');
  }

  render() {
    return (
      <div>
        <h1>Child Component</h1>
      </div>
    )
  }
}

现在每次我通过“添加计数”按钮更改父状态时，即使子组件没有更改，子组件中的 componentDidMount() 也会执行

Answer 1

父组件被触发重新渲染，并且在你的NewComp,shouldComponentUpdate默认总是返回 true，所以NewComp也被触发重新渲染。shouldComponentUpdate您可以通过实施inNewComp或使用来避免它PureComponent：

export default class NewComp extends PureComponent {

  componentDidUpdate(){
    console.log('Child component did update');
  }

  render() {
    return (
      <div>
        <h1>Child Component</h1>
      </div>
    )
  }
}

Answer 2

您可以使用shouldComponentUpdate生命周期方法来控制组件何时可以更新。通常componentDidUpdate在更新 props 或 state 时执行。

Answer 3

您可以看到以下查询。与您的相似

React：父组件重新渲染所有子组件，即使是那些在状态更改时没有更改的子组件

我希望它有所帮助。

Answer 4

组件更新生命周期钩子是当组件状态更新时应该使用的钩子，这些钩子在状态更新时肯定会执行，这就是它们的意思。

如果您只想在创建组件时执行某些逻辑，请考虑使用创建生命周期挂钩

或者

如果你想使用componentDidUpdatethen，请检查你想要的state或prop值是否改变了，然后继续

创建生命周期钩子：

更新生命周期钩子：