Reactjs 为什么组件更新生命周期在父级'；s的状态发生了变化？

我有一个名为“App”的父组件，其中使用了一个名为“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>
      );
    }
}

类应用程序扩展组件{
状态={
计数：0，
}
更改=（）=>{
这是我的国家({
计数：这个。状态。计数+1，
})
}
render（）{
返回(
Count={this.state.Count}

加计数
);
}
}

子组件：

export default class NewComp extends Component {

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

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

导出默认类NewComp扩展组件{
componentDidUpdate（）{
log（'Child component did update'）；
}
render（）{
返回(
子组件
)
}
}

---

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

shouldComponentUpdate

生命周期方法来控制组件何时可以更新。通常在更新道具或状态时执行

componentdiddupdate

。

您可以看到下面的查询。和你的相似

---

我希望有帮助

组件更新生命周期钩子是当组件状态中有更新时，应该用来执行某些操作的钩子，这些钩子在状态更新时肯定会执行，这就是它们的用途

如果只想在组件创建时执行一些逻辑，请考虑使用<强>创建生命周期钩子< /强>

或

如果要使用

componentdiddupdate

，请检查所需的状态或道具值是否已更改，然后继续

创意生命周期挂钩：

更新生命周期挂钩：

---

父组件被触发重新渲染，并且在您的

NewComp

中，

shouldComponentUpdate

默认情况下总是返回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>
    )
  }
}

导出默认类NewComp扩展PureComponent{
componentDidUpdate（）{
log（'Child component did update'）；
}
render（）{
返回(
子组件
)
}
}

正如您所说，“当道具或状态更新时，将执行componentDidUpdate”，但此处没有更新的状态或道具请检查react文档，因为默认情况下，

shouldComponentUpdate

发送true，因此当重新呈现父对象时，子对象也会更新，请参考react文档“shouldComponentUpdate（）当接收到新的道具或状态时，在呈现之前调用。默认值为true。初始呈现或使用forceUpdate（）时不调用此方法。“