创建时阶段
执行顺序:
constructor() => render() => componentDidMount()
钩子函数--------------------------触发时机------------------------------作用
constructor()---------------------创建组件时,最先执行--------1、初始化state 2、为事件处理程序绑定this
render()-------------------------- 每次组件渲染都会触发 ----------- 渲染UI 注意:不能调用 setState()
componentDidMount()--------组件挂载(完成DOM渲染)后-----1、发送网络请求 2、DOM操作
更新时阶段
执行时机:1、setState() 2、forceUpdate() 3、组件接收到新的props
说明:以上三者任意一种变化,组件就会重新渲染
执行顺序:render() => componentDidUpdate()
钩子函数-------------------------触发时机 --------------------------------- 作用
componentDidUpdate()-------组件更新(完成DOM渲染)后------1、发送网络请求 2、DOM操作
卸载阶段
执行时机:组件消失
钩子函数-------------------------- 触发时机---------------------------作用
componentWillUnmount()-----组件卸载(从页面消失)------ 执行清理工作(比如清理定时器)