组件DidMount和componentDidUpdate在反应本机中有什么区别

Question

我不明白componentDidMount和componentDidUpdate有什么区别

我看到一些计数器应用程序使用setState方法来增加componentDidMount内的计数值，那么如果我们在componentDidUpdate中编写setState怎么办？

什么时候我们应该使用componentDidMount或componentDidUpdate？

Answer 1

从组件生命周期的文档：

• componentDidMount()：在组件挂载后立即调用(插入到 DOM 树中)
• componentDidUpdate(prevProps, prevState, snapshot)：在更新发生后立即调用。初始呈现不调用此方法。将此用作在组件更新后对 DOM 进行操作的机会。

为了简单起见，第一个在开始时调用，在每次更改时调用第二个。它们绝对不可互换。

关于在componentDidUpdate中使用setState：当心！使用setState调用componentDidUpdate，因此如果您在 *每次调用componentDidUpdate时调用setState，则最终可能会得到无限循环。

哦，还有，这里有一个很酷的图表来总结整个组件生命周期。

Answer 2

componentDidMount()

componentDidMount() 将在组件挂载后立即呈现。此方法将只呈现一次，所有需要 DOM 节点的初始化都应转到此处。在此方法中设置状态将触发重新呈现。

componentDidUpdate()

每次更新发生时，都会立即调用 componentDidUpdate()。初始呈现不调用此方法。

您可以从以下示例中了解更多信息

import React from 'react';
class Example extends React.Component{
constructor(props) {
super(props);
this.state = {
count: 0
};
}
componentDidMount() {
//This function will call on initial rendering.
document.title = `You clicked ${this.state.count} times`;
}
componentDidUpdate() {
document.title = `You clicked ${this.state.count} times`;
}
render(){
return(
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
</div>
)
}
}
export default Example;

您可以通过注释和取消注释这两种生命周期方法来理解。