React-组件的生命周期

1.生命周期简介

组件的生命周期就是组件从被创建到挂载到页面中运行，再到组件不用是卸载的过程。

了解生命周期就是了解组件的运行方式，有助于我们完成更复杂的组件功能，分析组件错误的原因等

2.钩子函数

在生命周期的不同阶段，会自动被调用执行的函数，为开发人员在不同阶段操作组件提供了时机。

注意：只有类组件 才有证明周期钩子函数

3.react类组件的生命周期钩子函数-整体说明

由上图可知React生命周期钩子函数总共分为三大阶段：1挂载时，2更新时，3卸载时

那么下面详细说明这三个阶段 

 3.1.挂载阶段

执行时期：组件创建时（页面加载时）

执行顺序：constructor()=>render()=>componentDidMount

这三个钩子函数在这个阶段的作用

constructor:创建组件时，最先执行，起初始化state和创建Ref等作用

render：每次组件渲染时都会触发，起渲染作用

componentDidMount：组件挂载（完成DOM渲染）之后，起发送网络请求和DOM操作的作用

3.2.更新阶段

更新阶段会加载两个钩子函数：render()=>componentDidUpdate()

有三个操作可以触发组件的更新

1.调用setState，它能更改数据的同时重新更新页面

2.调用forceUpdate()

3.组件接收到新的props

注：以上三种操作任意一种都可以触发更新阶段

这两个钩子函数在这个阶段的作用

render：与挂载阶段相同，是同一个钩子函数

componentDidUpdate：在组件更新后，起操作DOM，可以获取到更新后的DOM内容

3.3卸载阶段

如名，它就是用来销毁组件的并且可以设定销毁时机

它所使用的钩子函数是componentWillUnmount

当组件销毁时触发，主要时用来执行清理工作，如清理定时器等