- 效果
需求:定义组件实现以下功能：
- 让指定的文本做显示 / 隐藏的渐变动画
- 从完全可见，到彻底消失，耗时2S
- 点击“不活了”按钮从界面中卸载组件
- 理解
1）组件从创建到死亡它会经历一些特定的阶段。
2）React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。
3）我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。
- 生命周期流程图(旧)
初始化阶段: 由ReactDOM.render()触发---初次渲染
constructor()
componentWillMount()
render()
componentDidMount()
更新阶段: 由组件内部this.setSate()或父组件重新render触发
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
卸载组件: 由ReactDOM.unmountComponentAtNode()触发
componentWillUnmount()
- 生命周期流程图(新)
初始化阶段: 由ReactDOM.render()触发---初次渲染
constructor()
getDerivedStateFromProps
render()
componentDidMount()
更新阶段: 由组件内部this.setSate()或父组件重新render触发
getDerivedStateFromProps
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate
componentDidUpdate()
卸载组件: 由ReactDOM.unmountComponentAtNode()触发
componentWillUnmount()
- 重要的勾子
render：初始化渲染或更新渲染调用
componentDidMount：开启监听, 发送ajax请求
componentWillUnmount：做一些收尾工作, 如: 清理定时器
- 即将废弃的勾子
componentWillMount
componentWillReceiveProps
componentWillUpdate
现在使用会出现警告，下一个大版本需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。
关键词：前端培训
