React生命周期函数的每个阶段和作用是否都深入全面了解过？

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

目录

1.注意事项

2.图解

3.生命周期函数

3.1 构造函数 3.2 static getDerivedStateFromProps 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 组件的构造函数在挂载之前被调用。在实现 React.Component 构造函数时，需要先在添加其它内容前，调用 super(props)，用来将父组件传来的 props 绑定到继承类中。