react父子组件生命周期顺序
时间: 2023-09-25 10:15:17 浏览: 323
React父子组件的生命周期顺序如下:
1. 父组件初始化阶段:constructor -> componentWillMount -> render -> componentDidMount
2. 子组件初始化阶段:constructor -> componentWillMount -> render -> componentDidMount
3. 父组件更新阶段:componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate
4. 子组件更新阶段:componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate
5. 父组件卸载阶段:componentWillUnmount
6. 子组件卸载阶段:componentWillUnmount
需要注意的是,React v16.3以后,componentWillMount、componentWillReceiveProps、componentWillUpdate 这几个生命周期函数被标记为不推荐使用,建议使用对应的UNSAFE_前缀函数,如UNSAFE_componentWillMount、UNSAFE_componentWillReceiveProps、UNSAFE_componentWillUpdate。
相关问题
父子组件生命周期执行顺序
在 React 中,父组件的生命周期函数总是先于子组件的生命周期函数执行,具体的执行顺序如下:
1. 父组件的 constructor
2. 父组件的 componentWillMount
3. 父组件的 render
4. 子组件的 constructor
5. 子组件的 componentWillMount
6. 子组件的 render
7. 子组件的 componentDidMount
8. 父组件的 componentDidMount
9. 父组件的 componentWillReceiveProps (如果有props更新)
10. 父组件的 shouldComponentUpdate (如果有props更新)
11. 父组件的 componentWillUpdate (如果有props更新)
12. 父组件的 render (如果有props更新)
13. 子组件的 componentWillReceiveProps (如果有props更新)
14. 子组件的 shouldComponentUpdate (如果有props更新)
15. 子组件的 componentWillUpdate (如果有props更新)
16. 子组件的 render (如果有props更新)
17. 子组件的 componentDidUpdate (如果有props更新)
18. 父组件的 componentDidUpdate (如果有props更新)
19. 父组件的 componentWillUnmount (如果组件卸载)
希望这能够帮助你理解父子组件的生命周期函数执行顺序。
父子组件生命周期的执行顺序
在 React 中,父子组件的生命周期函数的执行顺序如下:
1. 父组件:
* constructor
* static getDerivedStateFromProps
* render
* componentDidMount
2. 子组件:
* constructor
* static getDerivedStateFromProps
* render
* componentDidMount
3. 父组件更新:
* static getDerivedStateFromProps
* shouldComponentUpdate
* render
* getSnapshotBeforeUpdate
* componentDidUpdate
4. 子组件更新:
* static getDerivedStateFromProps
* shouldComponentUpdate
* render
* getSnapshotBeforeUpdate
* componentDidUpdate
5. 父组件卸载:
* componentWillUnmount
6. 子组件卸载:
* componentWillUnmount
需要注意的是,子组件的生命周期函数的执行顺序是在父组件的生命周期函数执行完之后才会开始执行。同时,子组件的生命周期函数也会在父组件更新时被调用。
阅读全文
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![-](https://img-home.csdnimg.cn/images/20241231044937.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231044930.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)