React生命周期函数如何全面深入解析？

本文共计3334个文字，预计阅读时间需要14分钟。

目录

1.注意事项

2.图解

3.生命周期函数

3.1 构造函数 3.2 static getDerivedStateFromProps(nextProps, prevState) 方法 3.3 挂载和更新时的生命周期函数执行顺序 3.4 componentWillUnmount 函数的使用

目录

• 1.注意
• 2. 图解
• 3. 生命周期函数
• 3.1 constructor构造函数
• 3.2 static getDerivedStateFromProps(nextProps, prevState)方法
• 3.3 挂载时和更新时的生命周期函数执行顺序
• 3.4 componentWillUnmount函数的使用
• 3.5 shouldComponentUpdate优化渲染方案

1.注意

函数组件无生命周期，生命周期只有类组件才拥有。

2. 图解

完整的生命周期主要为三个部分，分别为挂载时、更新时和卸载时，如下图所示：

3. 生命周期函数

3.1 constructor构造函数

描述：

React 组件的构造函数在挂载之前被调用。