关于react.js: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_前缀能力应用，当前可能会被彻底废除，不倡议应用。

关键词：前端培训