- 组件从创建到死亡它会经历一些特定的阶段。
- React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。
- 我们在定义组件时,会在特定的生命周期回调函数中,做特定的工作。
1.生命周期流程(旧)
生命周期的三个阶段(旧)
- 初始化阶段: 由ReactDOM.render()触发---初次渲染
- constructor()
- componentWillMount()即将废弃
- render()
- componentDidMount()
- 更新阶段: 由组件内部this.setSate()或父组件重新render触发
- shouldComponentUpdate()
- componentWillUpdate()即将废弃
- render()
- componentDidUpdate()
- 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
- componentWillUnmount()
2.生命周期流程(新)
生命周期的三个阶段(新)
- 初始化阶段: 由ReactDOM.render()触发---初次渲染
- constructor()
- getDerivedStateFromProps
- render() 初始化渲染或更新渲染调用
- componentDidMount() 开启监听, 发送ajax请求
- 更新阶段: 由组件内部this.setSate()或父组件重新render触发
- getDerivedStateFromProps
- shouldComponentUpdate()
- render() 初始化渲染或更新渲染调用
- getSnapshotBeforeUpdate
- componentDidUpdate()
- 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
- componentWillUnmount()做一些收尾工作, 如: 清理定时器