react新旧版本生命周期函数讲解

最新推荐文章于 2024-11-13 17:32:28 发布

原创

最新推荐文章于 2024-11-13 17:32:28 发布 · 2k 阅读

收录于

本文对比了React v16.3之前和v16.4及以后版本的生命周期函数变化，详细解释了被废弃的componentWillMount、componentWillReceiveProps和componentWillUpdate，以及新增的静态方法如getDerivedStateFromProps、getSnapshotBeforeUpdate和componentDidCatch。建议开发者遵循官方指导，使用新生命周期函数以避免误解和滥用。

react在引入 Fiber 之后，其生命周期也有所变化，新增了一些生命周期函数，同时也建议使用者废弃一些生命周期函数，下面博主对比一下react v16.3之前的生命周期与react v16.4及之后的生命周期函数。

一、生命周期图整体对比

1.1 react v16.3之前版本

在这里插入图片描述

挂载

当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：
- constructor()
- componentWillMount() (即将过时)
- render()
- componentDidMount()
更新

当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：
- componentWillReceiveProps() (即将过时)
- shouldComponentUpdate()
- componentWillUpdate() (即将过时)
- render()
- componentDidUpdate()
卸载

当组件从 DOM 中移除时会调用如下方法：
- componentWillUnmount()

1.2 react v16.4开始的版本，可查看 react生命周期图谱

在这里插入图片描述

挂载

当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：
- constructor()
- static getDerivedStateFromProps() (新增)
- render()
- componentDidMount()
更新

当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：
- static getDerivedStateFromProps() (新增)
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate() (新增)
- compon