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

2024-07-11 21:10| 来源: 网络整理| 查看: 265

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()

【本文地址】

今日新闻