父子组件的生命周期执行顺序
时间: 2023-11-08 11:41:36 浏览: 30
父子组件的生命周期执行顺序如下:
1. 父组件的constructor
2. 父组件的getDerivedStateFromProps
3. 父组件的render
4. 子组件的constructor
5. 子组件的getDerivedStateFromProps
6. 子组件的render
7. 子组件的componentDidMount
8. 父组件的componentDidMount
9. 父组件的shouldComponentUpdate
10. 父组件的getDerivedStateFromProps
11. 父组件的render
12. 子组件的shouldComponentUpdate
13. 子组件的getDerivedStateFromProps
14. 子组件的render
15. 子组件的componentDidUpdate
16. 父组件的componentDidUpdate
17. 父组件的componentWillUnmount
18. 子组件的componentWillUnmount
需要注意的是,如果父组件的props或state发生变化,子组件的生命周期函数会重新执行。同时,父组件的shouldComponentUpdate和getDerivedStateFromProps也会影响子组件的渲染,因此在父组件中进行一些优化操作可以提高整个组件树的性能。
相关问题
父子组件生命周期执行顺序
在 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 (如果组件卸载)
希望这能够帮助你理解父子组件的生命周期函数执行顺序。
vue父子组件生命周期执行顺序
Vue 父子组件生命周期执行顺序如下:
父组件(在第一次渲染时)
1. beforeCreate
2. created
3. beforeMount
子组件(在第一次渲染时)
1. beforeCreate
2. created
3. beforeMount
4. mounted
父组件(在子组件挂载完成后)
1. mounted
如果有数据更新时,父子组件执行顺序如下:
父组件
1. beforeUpdate
子组件
1. beforeUpdate
2. updated
父组件
1. updated
如果子组件被销毁,执行顺序如下:
子组件
1. beforeDestroy
2. destroyed
父组件则没有任何改变。