【React】第六部分 生命周期

【React】第六部分 生命周期

---

---

6. 生命周期

6.1 什么是生命周期

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

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

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

6.2 生命周期流程图（旧）

初始化阶段

由ReactDOM.render()触发 -- 初次渲染

1. constructor（） 构造器函数
2. componentWillMount（）组件将要被挂载
3. render（） 页面渲染
4. componentDidMount（）组件挂载完毕
5. componentWillUnmount（） 组件将要被卸载

更新阶段

由组件内部this.setState()或者是父组件重新render触发

1. shouldComponentUpdate（） 开启更新（相当于一个开关）
2. componentWillUpdate（） 组件将要更新
3. render（）页面渲染
4. componentDidUpdate（）组件更新完毕
5. componentWillUnmount（） 组件将要被卸载

强制更新阶段

由组件内部this.forceUpdate()强制更新

1. render（）页面渲染
2. componentDidUpdate（）组件更新完毕
3. componentWillUnmount（） 组件将要被卸载

卸载组件

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

1. componentWillUnmount（） 组件将要被卸载

6.3 生命周期流程图（新）

注意：

废弃3个钩子

1. componentWillMount 组件将要被挂载

2. componentWillReceiveProps 组件将要接收参数

3. componentWillUpdate 组件将要被更新

新增2个钩子（想要了解更多可以移至官网）新增的2个钩子官方也表示用的地方很少

1. getDerivedStateFromProps

2. getSnapshotBeforeUpdate

初始化阶段

由ReactDOM.render() 触发---初次渲染

1. constructor（） 构造器函数

2. getDerivedStateFromProps （）

3. render（） 页面渲染

4. componentDidMount（） 组件挂载完毕

5. componentWillUnmount（）组件将要被卸载

更新阶段

由组件内部this.setSate()或父组件重新render触发或者组件内部this.forceUpdate()

1. getDerivedStateFromProps（）

2. shouldComponentUpdate（） 开启更新

3. render（） 页面渲染

4. getSnapshotBeforeUpdate（）

5. componentDidUpdate（）更新完毕

6. componentWillUnmount（）组件将要被卸载

卸载组件

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

1. componentWillUnmount（） 组件将要被卸载

6.4 总结新旧生命周期

其实最重要最常用的钩子，在新旧生命周期中都没有发生变化

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

2. componentDidMount：一般用于开启监听, 发送ajax请求

3. componentWillUnmount：一般用于做一些收尾工作, 如: 清理定时器

---

总结

以上就是今天要讲的内容，希望对大家有所帮助！！！