共计 964 个字符，预计需要花费 3 分钟才能阅读完成。
- 成果
需要: 定义组件实现以下性能：
- 让指定的文本做显示 / 暗藏的突变动画
- 从齐全可见，到彻底隐没，耗时 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_前缀能力应用，当前可能会被彻底废除，不倡议应用。
关键词：前端培训
