【React】React组件生命周期以及触发顺序（部分与vue做比较）_react 父子组件声明周期

最近在学习React，发现其中的生命周期跟Vue有一些共同点，但也有比较明显的区别，并且执行顺序也值得讨论一下，于是总结了一些资料在这里，作为学习记录。

v17.0.1后生命周期图片

初始化阶段

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

1. constructor() —— 类组件中的构造函数
2. static getDerivedStateFromProps(props, state) 从props得到一个派生的状态【新增，不常用】
3. render() —— 挂载组件
4. componentDidMount() —— 组件挂载完成 比较常用
   总结：
   constructor 对标 Vue中的beforeCreate/created
   componentDidMount 对标 Vue中的 Mounted
   在一个完整的生命周期中，constructor 与 componentDidMount 只会执行一次。
   在一个完整的生命周期中，render会执行多次
   注意：
   在React中，我们在componentDidMount 中发请求，绝对不在constructor 中发请求。

更新阶段

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

1. getDerivedStateFromProps() —— 从props得到一个派生的状态 【新增，不常用】
2. shouldComponentUpdate() —— 组件是否应该被更新（默认返回true）
3. render() —— 挂载组件
4. getSnapshotBeforeUpdate() —— 在更新之前获取快照【新增，不常用】
5. componentDidUpdate(prevProps, prevState, snapshotValue) —— 组件完成更新。
   总结：
   触发组件更新的方式（常用），两种：
   1. 声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/857481