组件的生命周期:组件从被创建到挂载到页面中运行,再到组件被卸载的过程。
生命周期的每个阶段总是伴随着一些方法的调用,这些方法就是生命周期的钩子函数。
钩子函数的作用:为开发人员在不同阶段操作组件提供了时机。
注意:只有类组件才有生命周期!
生命周期的三个阶段
1. 创建时(挂载阶段)
执行时机:页面加载(组件创建)时;
此阶段一共有三个钩子函数:constructor、render、componentDidMount;
class App extends React.Component{
constructor(props){
super(props)
console.warn("生命周期钩子函数: constructor")
}
componentDidMount(){
console.warn("生命周期钩子函数: componentDidMount")
}
render(){
console.warn("生命周期钩子函数: render")
return (
<div>
<h1>组件创建时</h1>
</div>
)
}
}
ReactDOM.render(<App />,document.getElementById('root'))
其输出结果如下:
由此可见这三个钩子函数执行顺序为:
2. 更新时(更新阶段)
有三种情况会导致组件更新:
1)组件接收到新的props值;
2)调用setState方法;
3)调用this.forceUpdate()方法强制更新页面;
该阶段下钩子函数的执行顺序为:
在componentDidUpdate周期中,不能直接调用this.setState()方法,这会导致递归更新,
我们通常是比较更新前后的props是否相同,来决定是否更新
componentDidUpdate(prevProps){
console.log("上一次props:"+prevProps);
console.log("当前props:"+this.props)
if(prevProp.属性名!=this.props.属性名){
this.setState({})
}
}
3. 卸载时(卸载阶段)
执行时机:组件从页面中消失