为什么组件更新生命周期会在父级状态发生变化时执行？

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>
    )
  }
}

现在每次我通过 'Add Count' 按钮更改父状态时，即使子组件没有变化，子组件中的 componentDidMount() 也会执行

Answer 1

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

Answer 2

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

希望对您有所帮助。

Answer 3

Component Update life cycle hooks 是在组件 state 更新时应该用来采取一些行动的钩子，这些钩子肯定会在状态更新时执行，这就是它们的用途。

If you want to execute some logic only when the component gets created please consider using Creational Life cycle hooks

或

If you want to use componentDidUpdate then, please have a check whether your desired state or prop value is changed and then go ahead

创作生命周期挂钩：

更新生命周期挂钩：

Answer 4

父组件被触发重新渲染，在你的NewComp，shouldComponentUpdate默认情况下总是return true，所以NewComp也被触发重新渲染.您可以通过在 NewComp 中实现 shouldComponentUpdate 或使用 PureComponent:

来避免它

export default class NewComp extends PureComponent {

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

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

为什么组件更新生命周期会在父级状态发生变化时执行？

Why component update lifecycle executes whenever parent's state changes?

reactjs

react-lifecycle

react-component