React 组件的生命周期

1. 效果

需求:定义组件实现以下功能：

1. 让指定的文本做显示 / 隐藏的渐变动画
2. 从完全可见，到彻底消失，耗时2S
3. 点击“不活了”按钮从界面中卸载组件
4. 理解

1）组件从创建到死亡它会经历一些特定的阶段。

2）React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。

3）我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。

3. 生命周期流程图(旧)

初始化阶段: 由ReactDOM.render()触发---初次渲染

constructor()

componentWillMount()

render()

componentDidMount()

更新阶段: 由组件内部this.setSate()或父组件重新render触发

shouldComponentUpdate()

componentWillUpdate()

render()

componentDidUpdate()

卸载组件: 由ReactDOM.unmountComponentAtNode()触发

componentWillUnmount()

4. 生命周期流程图(新)

初始化阶段: 由ReactDOM.render()触发---初次渲染

constructor()

getDerivedStateFromProps

render()

componentDidMount()

更新阶段: 由组件内部this.setSate()或父组件重新render触发

getDerivedStateFromProps

shouldComponentUpdate()

render()

getSnapshotBeforeUpdate

componentDidUpdate()

卸载组件: 由ReactDOM.unmountComponentAtNode()触发

componentWillUnmount()

5. 重要的勾子

render：初始化渲染或更新渲染调用

componentDidMount：开启监听, 发送ajax请求

componentWillUnmount：做一些收尾工作, 如: 清理定时器

6. 即将废弃的勾子

componentWillMount

componentWillReceiveProps

componentWillUpdate

现在使用会出现警告，下一个大版本需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。

关键词：前端培训