下沙做网站的公司,计算机网络中小型企业网络设计方案,网页配色设计手册,排名好的网站建设企业1. 前言 本篇梳理和总结一下React的生命周期函数#xff0c;方便使用class组件的同学查阅#xff0c;先上生命周期图谱。 2. 生命周期函数
生命周期函数说明constructor(props) 功能#xff1a;如果不需要初始化state或不进行方法绑定#xff0c;class组件可以不用实现构造…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的世界。
下一篇【React】常用Hook函数的梳理和总结第二篇-CSDN博客
注以上如有不合理之处还请帮忙指出大家一起交流学习~
