【React】class组件生命周期函数的梳理和总结(第一篇)

2024-01-03 18:58:11
1. 前言

????????本篇梳理和总结一下React的生命周期函数,方便使用class组件的同学查阅,先上生命周期图谱。

2. 生命周期函数
生命周期函数说明
constructor(props)

功能:如果不需要初始化state或不进行方法绑定,class组件可以不用实现构造函数constructor。

输入:props - 设置组件当前状态props

static getDerivedStateFromProps(

? ? nextProps,

? ? state

)

功能:静态方法,在调用render方法之前调用,挂载或更新时都会调用,返回一个新对象来更新state。

注:即用新props来更新state

输入

nextProps - 还未更新的接下来props

state - 组件当前状态

输出:state -组件新的状态

shouldComponentUpdate(

? ? nextProps,

? ? nextState

)

功能:根据该函数返回时,判断React组件输出是否受当前state或props更改的影响,默认行为是state每次发生变化组件都会重新渲染

注:首次渲染或forceUpdate时不用调用该方法

输入

nextProps - 还未更新的接下来props

nextState - 还未更新的接下来state

输出:boolean(返回false,则跳过更新)

render()

功能:检查this.props和this.state变化,是纯函数。

注:shouldComponentUpdate返回false,则不调用render

输入:无

输出:ReactElement | 数组或Fragments | Portals | string | number | boolean | null | undefined

getSnapshotBeforeUpdate(

? ? prevProps,

? ? prevState

)

功能:最近一次渲染输出(提交到DOM节点)之前调用,返回值传递给componentDidUpdate第3个参数,此处适合的操作:

1. 在发生更改前从DOM中捕获一些信息(滚动位置)

输入

prevProps - 在更新之前的props

prevState - 在更新之前的state

输出:snapShot

componentDidUpdate(

? ? prevProps,

????prevState,

????snapShot

)

功能:组件更新后立即调用,首次渲染不执行,适合在此处的操作:

1. 比较前后props发起网络请求

2. DOM操作

注:可以在此处调用setState,但需要包裹在条件语句中,防止死循环

输入

prevProps - 在更新之前的props

prevState - 在更新之前的state

snapShot -getSnapshotBeforeUpdate返回的快照

componentDidMount()

功能:组件挂载(插入DOM树)后立即调用,适合在此处的操作:

1. 设置定时器timer

2. 发起网络请求

3. 添加订阅

4. DOM操作

注:可以在此处调用setState,但会导致性能问题

输入:无

componentWillUnmount()

功能:class组件卸载及销毁之前直接调用,执行必要清理工作:

1. 清除tImer

2. 取消网络请求

3. 清除订阅

注:不能在此处调用setState

输入:无

异常出错时的生命周期函数
static getDerivedStateFromError(error)

功能:当后代组件抛出错误后被调用

注:该函数在渲染阶段调用,不允许出现副作用。

输入:error - 抛出的错误

输出:state -组件新的状态

componentDidCatch(error, info)

功能:当后代组件抛出错误后被调用

注:该函数在提交阶段调用,允许执行副作用。开发模式错误会冒泡到window,生产模式不会冒泡。

输入

error - 抛出的错误

info - 带有componentStack key的对象,包含组件引发错误的栈信息

2.1?挂载

????????当组件实例被创建并插件DOM时,其生命周期函数调用顺序如下:

  • constructor(props)
  • static getDerivedStateFromProps()
  • render()
  • componentDidMount()
2.2 更新

? ? ? ? 当组件更新时,其生命周期函数调用顺序如下:

  • new props、setState和forceUpdate触发更新
  • static getDerivedStateFromProps()
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpate()
2.3 卸载
  • componentWillUnmount()
3. 总结

? ? ? ? 学习或复习时,注意各生命周期方法的参数,部分带参数的方法,props在前,state在后,render之前的是nextProps nextState(渲染阶段),render之后的是prevProps, prevState(提交阶段)。

????????React新的官方文档已再不提生命周期函数,将PureComponent和Component标记为过时的API,笔者猜想React后续不再推荐使用class组件,而是转入函数组件FC,欢迎大家进入Hook的世界。

注:以上,如有不合理之处,还请帮忙指出,大家一起交流学习~??

文章来源:https://blog.csdn.net/weixin_45620943/article/details/135360169
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。